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?

html css Hiromi Nagashim
sumber
Terkait: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr
Thilo

Jawaban:

165

coba ini:

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

refaelos
sumber
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 };
dave
sumber
10
Tampaknya tidak berfungsi (Chromium 12 / Ubuntu 11.04) .
David mengatakan mengembalikan Monica
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.

Fijter
sumber
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...

Tom Dickman
sumber
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.

Alex
sumber
5

Jika Anda menggunakan Bootstrap, lihat s paddingAnda td.

1 pria
sumber
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>
Md. Shafiqur Rahman
sumber
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;
}
Eugene Porodko
sumber