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

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