Mengatur tinggi baris tabel


136

Saya punya kode ini:

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

Baris ditempatkan terlalu jauh. Saya ingin garis lebih dekat bersama.

Apa yang saya lakukan adalah menambahkan CSS berikut tetapi sepertinya tidak mengubah apa pun.

.topics tr { height: 14px; }

Apa yang saya lakukan salah?


Jawaban:


165

coba ini:

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


160
Saya tidak mengerti mengapa ini memiliki begitu banyak suara, itu tidak menyelesaikan masalah. Ini hanya berfungsi jika Anda hanya memiliki 1 baris teks di tr. Solusi ini menetapkan tinggi garis , bukan trtinggi.
BenR

2
Seperti disebutkan dalam komentar nanti. tingginya harus lebih besar dari ketinggian konten terbesar Anda. Kalau tidak, itu hanya akan menggunakan ketinggian konten terbesar sebagai ketinggian minimum. Dan ya, ini hanya berfungsi untuk satu baris teks.
Varun Chatterji

1
Ini hanya berguna untuk teks satu baris.
shekhardtu

23

coba atur atribut untuk td :

.topic td{ height: 14px };


1
serius? Saya pikir ini akan selalu berhasil. tentu saja sekarang. bagaimanapun ini adalah solusi yang saya temukan sebagai yang terbaik karena cara sel tabel bekerja adalah memperluas ke konten mereka. jadi heightsecara tdefektif min-height, yang dalam hal ini sebenarnya yang Anda inginkan
Simon_Weaver

@dave Dalam kasus saya juga hanya @davesolusi yang berfungsi. line-heighttidak bekerja dengan tratau td. Tidak yakin apakah itu ada hubungannya dengan waktu karena pos aslinya berumur enam tahun dan beberapa aturan html / css mungkin telah berubah sekarang karena sebagian besar browser sekarang menggunakan HTML5.
nam

Juga, dalam pengalaman saya , jika Anda mengatur ketinggian pada tr dan kemudian tinggi 100% atau ketinggian apa pun di td di dalamnya, saya percaya sistem berpikir bahwa ketinggian diatur pada td dan tidak mengikuti ketinggian tr dan baris diatur ke ketinggian default. Jadi atur ketinggian di td. Inilah alasan saya
memutakhirkan

9

Anda dapat menghapus beberapa spasi tambahan juga jika Anda menempatkan border-collapse: collapse;pernyataan CSS di meja Anda.


6

Saya menemukan jawaban terbaik untuk tujuan saya adalah menggunakan:

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

Ini white-space: nowrappenting karena mencegah sel-sel baris Anda dari melanggar beberapa baris.

Secara pribadi saya ingin menambahkan elemen text-overflow: ellipsissaya thdan tduntuk membuat teks yang meluap terlihat lebih baik dengan menambahkan trailing fullstops, misalnyaToo long gets dots...


5

line-height hanya berfungsi bila lebih besar dari tinggi konten saat ini <td>. Jadi, jika Anda memiliki ikon 50x50 di tabel, trketinggian garis tidak akan membuat baris lebih kecil dari 50px (+ padding).

Karena Anda telah mengatur padding untuk 0itu harus sesuatu yang lain,
misalnya ukuran font besar di dalam tdyang lebih besar dari 14px Anda.


5

Jika Anda menggunakan Bootstrap, lihat s paddingAnda td.


1

sekali saya harus memperbaiki ketinggian baris bernilai tertentu dengan menggunakan inline CSS sebagai berikut ..

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

1

Sedangkan saya, saya memutuskan untuk menggunakan bantalan. Ini bukan apa yang Anda butuhkan, tetapi mungkin berguna dalam beberapa kasus.

table td {
    padding: 15px 0;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.