Ustawianie wysokości wiersza tabeli

139

Mam ten kod: 

<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>

Rzędy są zbyt daleko od siebie. Chcę, żeby linie były bliżej siebie.

Dodałem następujący CSS, ale wydaje się, że nic to nie zmienia. 

.topics tr { height: 14px; }

Co ja robię źle?

html css Hiromi Nagashim
źródło
Związane z: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr
Thilo

Odpowiedzi:

168

Spróbuj tego:

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

refaelos
źródło
166
Nie rozumiem, dlaczego to ma tak wiele głosów, to nie rozwiązuje problemu. Działa tylko wtedy, gdy masz tylko 1 linię tekstu w tr. To rozwiązanie określa wysokość linii , a nie trwysokość.
BenR
2
Jak wspomniano w późniejszym komentarzu. wysokość musi być większa niż wysokość największej treści. W przeciwnym razie jako wysokość minimalną użyje tylko wysokości największej treści. I tak, to działa tylko dla jednej linii tekstu.
Varun Chatterji
1
Jest to przydatne tylko w przypadku tekstu jednowierszowego.
shekhardtu
23

spróbuj ustawić atrybut dla td tak:

.topic td{ height: 14px };
dave
źródło
10
Wygląda na to, że nie działa (Chromium 12 / Ubuntu 11.04) .
David mówi, że przywróć Monikę
1
poważnie? Myślałem, że to zawsze zadziała. z pewnością tak jest teraz. w każdym razie jest to rozwiązanie, które uznałem za najlepsze, ponieważ sposób działania komórek tabeli polega na rozszerzaniu się do ich zawartości. więc heightw a tdjest efektywnie min-height, co w tym przypadku jest tym, czego chcesz
Simon_Weaver
@dave W moim przypadku zadziałało też tylko @daverozwiązanie. line-heightnie działa ani z trani td. Nie jestem pewien, czy ma to coś wspólnego z czasem, ponieważ oryginalny post ma sześć lat, a niektóre reguły html / css mogły się już zmienić, ponieważ większość przeglądarek używa teraz HTML5.
nam
Z mojego doświadczenia wynika również, że jeśli ustawisz wysokość na tr, a następnie 100% wysokości lub dowolną wysokość na td w środku, uważam, że system uważa, że ​​wysokość jest ustawiona na td i nie podąża za wysokością tr, a wiersz ma ustawioną domyślną wysokość. Więc po prostu ustaw wysokość na td. To jest powód, dla którego zagłosowałem za tą odpowiedzią
user3245268
9

Możesz również usunąć dodatkowe odstępy, jeśli border-collapse: collapse;umieścisz w tabeli instrukcję CSS.

fijter
źródło
6

Uznałem, że najlepszą odpowiedzią do moich celów jest użycie: 

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

Jest white-space: nowrapto ważne, ponieważ zapobiega dzieleniu komórek wiersza na wiele linii.

I personnally jak dodać text-overflow: ellipsisdo moich thand tdelementów, aby brzegi wygląd tekstu ładniejszy dodając końcowe fullstops, na przykładToo long gets dots...

Tom Dickman
źródło
5

line-height działa tylko wtedy, gdy jest większy niż bieżąca wysokość zawartości <td>. Tak więc, jeśli masz w tabeli ikonę 50x50, trwysokość linii nie spowoduje, że wiersz będzie mniejszy niż 50 pikseli (+ dopełnienie).

Ponieważ już ustawiłeś dopełnienie 0, musi to być coś innego,
na przykład duży rozmiar czcionki w środku, tdktóry jest większy niż 14 pikseli.

Alex
źródło
4

Jeśli używasz Bootstrap, spójrz na paddingswoje tdpliki s.

1 osoba
źródło
3

Jak dla mnie zdecydowałem się na paddingi. Nie jest to dokładnie to, czego potrzebujesz, ale w niektórych przypadkach może być przydatne.

table td {
    padding: 15px 0;
}
Eugene Porodko
źródło
1

kiedy muszę ustalić wysokość wiersza o określonej wartości, używając wbudowanego CSS w następujący sposób.

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>
Md. Shafiqur Rahman
źródło