Impostazione dell'altezza della riga della tabella

136

Ho questo codice:

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

Le file sono troppo distanziate. Voglio che le linee si avvicinino.

Quello che ho fatto è stato aggiungere il seguente CSS ma non sembra cambiare nulla.

.topics tr { height: 14px; }

Che cosa sto facendo di sbagliato?

html css

— Hiromi Nagashim
fonte

Correlati: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

— Thilo

165

prova questo:

.topics tr { line-height: 14px; }

— refaelos
fonte

160

Non capisco perché questo abbia così tanti voti, non risolve il problema. Funziona solo se hai solo 1 riga di testo in tr. Questa soluzione imposta l' altezza della linea , non l' traltezza.

— BenR,

2

Come menzionato in un commento successivo. l'altezza deve essere maggiore dell'altezza del contenuto più grande. Altrimenti, utilizzerà solo l'altezza del contenuto più grande come altezza minima. E sì, questo funziona solo per una riga di testo.

— Varun Chatterji,

1

È utile solo nel caso di una riga di testo.

— shekhardtu,

23

prova a impostare l'attributo per td questo:

.topic td{ height: 14px };

— dave
fonte

10

Non sembra funzionare (Chromium 12 / Ubuntu 11.04) .

— David dice di ripristinare Monica il

1

sul serio? Ho pensato che avrebbe sempre funzionato. lo fa certamente adesso. comunque questa è la soluzione che ho trovato migliore poiché il modo in cui funzionano le celle di una tabella è espandere il loro contenuto. quindi heightin a tdè effettivamente un'altezza minima, che in questo caso è effettivamente quello che vuoi

— Simon_Weaver

@dave Nel mio caso ha funzionato anche solo @davela soluzione. line-heightnon ha funzionato con tro td. Non sono sicuro che abbia qualcosa a che fare con i tempi poiché il post originale ha sei anni e alcune delle regole html / css potrebbero essere cambiate ormai poiché la maggior parte dei browser utilizza HTML5.

— nam

Inoltre, nella mia esperienza , se hai impostato un'altezza su tr e quindi un'altezza del 100% o qualsiasi altezza sulla td al suo interno, credo che il sistema pensi che l'altezza sia impostata sulla td e non segua l'altezza della tr e la riga è impostata sull'altezza predefinita. Quindi basta impostare l'altezza sulla td. Questo è il motivo per cui ho votato a favore di questa risposta

— user3245268,

9

È possibile rimuovere anche una spaziatura aggiuntiva se si posiziona border-collapse: collapse;un'istruzione CSS sulla tabella.

— fijter
fonte

6

Ho trovato la migliore risposta per i miei scopi era usare:

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

Il white-space: nowrapè importante, poiché impedisce alle cellule del vostro fila di rottura su più righe.

Personalmente mi piace aggiungere text-overflow: ellipsisal mio the tdagli elementi per rendere più bello il testo traboccante aggiungendo i fullstops finali, ad esempioToo long gets dots...

— Tom Dickman
fonte

5

l'altezza della linea funziona solo quando è maggiore dell'altezza attuale del contenuto di <td>. Quindi, se hai un'icona 50x50 nella tabella, l' traltezza della linea non renderà una riga più piccola di 50px (+ padding).

Dato che hai già impostato il padding su 0deve essere qualcos'altro,
ad esempio una dimensione del carattere grande all'interno tdche è più grande del tuo 14px.

— alex
fonte

5

Se stai usando Bootstrap, guarda i paddingtuoi messaggi td.

— 1man
fonte

1

una volta ho bisogno di correggere l'altezza di una particolare riga valutata utilizzando CSS inline come segue ..

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

— Signor Shafiqur Rahman
fonte

1

Quanto a me, ho deciso di usare le imbottiture. Non è esattamente ciò di cui hai bisogno, ma può essere utile in alcuni casi.

table td {
    padding: 15px 0;
}

— Eugene Porodko
fonte