Come correggere l'altezza di TR?

102

È possibile fissare l'altezza di una riga (tr) su un tavolo?

Il problema si verifica quando restringo la finestra del browser, alcune righe iniziano a giocare e non riesco a correggere l'altezza della riga.

Ho provato diversi modi: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Sto usando IE7

Stile

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

Codice HTML.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html  html-table  row 
— Amra
fonte

Risposte:

97

Le tabelle sono incerte (almeno, in IE) quando si tratta di fissare le altezze e non di avvolgere il testo. Penso che scoprirai che l'unica soluzione è inserire il testo all'interno di un divelemento, in questo modo:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
Espandi lo snippet

In questo modo, l div'altezza è quella della cella che lo contiene e il testo non può crescere div, mantenendo la cella / riga alla stessa altezza indipendentemente dalle dimensioni della finestra.

— Andy E
fonte
1
Grazie per il consiglio, sembra funzionare, ma sembra un po 'disordinato.
— Amra
Felice di aiutarti :-) Sfortunatamente, il codice disordinato di solito è il caso di hack e soluzioni alternative.
— Andy E
Uso [code] .container {width: 100%; altezza massima: 40 px; overflow: hidden; } [/ code] e [code] <div class = 'container'> </div> [/ code].
— Cees Timmerman
Ho seguito lo stesso metodo, inserendo un div all'interno di un tag <th> e ha funzionato bene. Ho avuto questo problema solo su Chrome. FFox, Safari e IE hanno supportato bene l'altezza impostata nell'intestazione della tabella. Grazie per la condivisione! :)
— Mário Rodrigues
non funziona in safari ... devi impostare l'altezza e la larghezza effettive anche sul div, non solo il td
— Radu Simionescu
15

Prova a inserire l'altezza in una delle celle, in questo modo:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Tieni presente, tuttavia, che non sarai in grado di ridurre le dimensioni della cella rispetto a quanto richiesto dal contenuto. In tal caso dovresti prima rimpicciolire il testo.

— colpire
fonte
1
Sono abbastanza sicuro che non usi "px" negli attributi html.
— unflores
10
Sono abbastanza sicuro che puoi usare l'attributo di stile.
— Burak Dobur
11

Impostare l' tdaltezza su un valore inferiore all'altezza naturale del suo contenuto

Poiché le celle della tabella vogliono essere almeno abbastanza grandi da racchiudere il loro contenuto, se il contenuto non ha un'altezza apparente, le celle possono essere ridimensionate arbitrariamente.

Ridimensionando le celle, possiamo controllare l'altezza della riga.

Un modo per farlo è impostare il contenuto con una absoluteposizione all'interno della relativecella e impostare il valore heightdella cella e il valore lefte topdel contenuto.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
Espandi lo snippet

La table-layoutproprietà

La seconda tabella nello snippet sopra è stata table-layout: fixedapplicata, il che fa sì che alle celle venga data la stessa larghezza, indipendentemente dal loro contenuto, all'interno del genitore.

Secondo caniuse.com , non ci sono problemi di compatibilità significativi riguardo all'uso di a table-layoutpartire dal 12 settembre 2019.

O semplicemente applicalo widtha celle specifiche come nella terza tabella.

Questi metodi consentono alla cella contenente il contenuto effettivamente senza dimensioni creato applicando position: absolutedi ricevere una circonferenza arbitraria.

Molto più semplicemente ...

Avrei davvero dovuto pensarci dall'inizio; possiamo manipolare il contenuto della cella della tabella a livello di blocco in tutti i modi usuali e senza distruggere completamente la dimensione naturale del contenuto con position: absolute, possiamo lasciare la tabella per capire quale dovrebbe essere la larghezza.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
Espandi lo snippet

— Fred Gandt
fonte
Finalmente una risposta che sembra promettente! Devo provarlo non appena sarò al lavoro, darò un feedback se non dimentico.
— jeromej
1
Ha funzionato come un fascino! (Attenzione che rimuove text-align: centere altri trucchi di centratura però ... poiché si basa su position: absolute)
— jeromej
Questo funziona per l'altezza nel mio caso, ma quando lo uso postion: absolute, perdo la larghezza della cella automatica. Cercando di trovare un modo per fare in modo che la tabella calcoli ancora correttamente la larghezza della cella mentre si prende il controllo sull'altezza della riga. qualche idea?
— cenere l'
@ash - Non sto pensando immediatamente a un modo per mantenere la larghezza completamente automatica dopo aver effettivamente distrutto la dimensione del contenuto, ma possiamo forzare le celle della tabella ad essere arbitrariamente larghe. Ho ampliato lo snippet di esempio per mostrare un metodo che potrebbe aiutarti. Ci
— penserò
Grazie Fred. Nota che potrei avere intestazioni (<th>) per dare una dimensione fissa alle colonne, ma poi sono preoccupato che le intestazioni potrebbero essere troppo strette o troppo larghe.
— cenere il
8

Mettere div all'interno di un td lo ha fatto funzionare per me. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
— user2987600
fonte
2

La larghezza della tua tabella è del 90% rispetto al suo contenitore.

Se stringi la pagina, probabilmente stai riducendo anche la larghezza del tavolo. Anche la larghezza delle celle si riduce e il browser compensa aumentando l'altezza.

Per mantenere l'altezza inalterata, devi assicurarti che le larghezze delle celle possano contenere il contenuto inteso. La correzione della larghezza del tavolo è probabilmente qualcosa che vuoi provare. O forse gioca con la larghezza minima del tavolo.

— OKW
fonte
1

Ho dovuto farlo per ottenere il risultato che volevo:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

Si rifiutava di lavorare solo con la cella o il div e aveva bisogno di entrambi.

— jen
fonte
-5

Questo perché le parole si stanno avvolgendo e stanno andando su nuove righe, quindi allungando il TR. Questo dovrebbe risolvere il tuo problema:

overflow:hidden;

Mettilo negli stili TR Anche se dovrebbe funzionare, perché non lasciarlo allungare o0

PS. Non l'ho testato quindi non odio XD

— Ozzy
fonte
3
Non odio, ma c'è un elenco di stili supportati dall'elemento TD in IE su msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflownon è uno di loro.
— Andy E
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.