Tablo satırı yüksekliğini ayarlama

137

Bu koda sahibim:

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

Satırlar birbirinden çok uzakta. Hatların birbirine daha yakın olmasını istiyorum.

Yaptığım şey aşağıdaki CSS'yi eklemekti, ancak hiçbir şeyi değiştirmiyor gibi görünüyor.

.topics tr { height: 14px; }

Neyi yanlış yapıyorum?

html css

— Hiromi Nagashim
kaynak

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

— Thilo

166

bunu dene:

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

— refaelos
kaynak

160

Bunun neden bu kadar çok oy aldığını anlamıyorum, sorunu çözmüyor. Yalnızca .txt dosyasında yalnızca 1 satır metniniz varsa çalışır tr. Bu çözüm , yüksekliği değil satır yüksekliğini belirler tr.

— BenR

2

Daha sonraki bir yorumda belirtildiği gibi. yükseklik, en büyük içeriğinizin yüksekliğinden daha büyük olmalıdır. Aksi takdirde, en büyük içeriğin yüksekliğini minimum yükseklik olarak kullanır. Ve evet, bu yalnızca bir metin satırı için işe yarar.

— Varun Chatterji

1

Yalnızca tek satırlık metin durumunda kullanışlıdır.

— shekhardtu

23

bunun için özniteliği ayarlamayı deneyin td :

.topic td{ height: 14px };

— dave
kaynak

10

Çalışmıyor gibi görünüyor (Chromium 12 / Ubuntu 11.04) .

— David, Monica'nın

1

ciddi anlamda? Bunun her zaman işe yarayacağını düşündüm. şimdi kesinlikle öyle. her neyse, bu en iyi bulduğum çözüm çünkü tablo hücrelerinin çalışma şekli içeriklerini genişletmek. böylece heighta tdefektif olarak minimum yüksekliktir, bu durumda aslında istediğiniz şey budur

— Simon_Weaver

@dave Benim durumumda da sadece @daveçözüm çalıştı. veya line-heightile çalışmadı . Orijinal gönderi altı yaşında olduğundan ve tarayıcıların çoğu HTML5 kullandığı için bazı html / css kuralları şimdiye kadar değişmiş olabileceğinden, bunun zamanlamayla bir ilgisi olup olmadığından emin değilim. trtd

— nam

Ayrıca, tecrübelerime göre , tr'de bir yükseklik ayarlarsanız ve ardından içindeki td'de% 100 veya herhangi bir yükseklik ayarlarsanız, sistemin yüksekliğin td'de ayarlandığını ve bunun yüksekliğini takip etmediğini düşünüyorum. tr ve satır varsayılan yüksekliğe ayarlanır. Yani td'de yüksekliği ayarlayın. Bu yanıtı yükseltmemin nedeni budur

— user3245268

9

border-collapse: collapse;Tablonuza bir CSS ifadesi yerleştirirseniz, fazladan bazı boşlukları da kaldırabilirsiniz .

— fijter
kaynak

6

Amaçlarım için en iyi cevabı kullanmak oldu:

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

white-space: nowrapSatırlara genelinde kırma adresinin satırın hücrelerini engeller kadar önemlidir.

Kişisel olarak, örneğin sondaki fullstopları ekleyerek taşan metnin daha güzel görünmesini sağlamak text-overflow: ellipsisiçin my thand tdelementlerine eklemeyi seviyorum.Too long gets dots...

— Tom Dickman
kaynak

5

satır yüksekliği yalnızca içeriğinin geçerli yüksekliğinden daha büyük olduğunda çalışır <td>. Dolayısıyla, tabloda 50x50'lik bir simgeniz varsa, trsatır yüksekliği 50 pikselden (+ dolgu) daha küçük bir satır yapmaz.

Dolguyu zaten ayarladığınız için 0başka bir şey olmalı,
örneğin içinde 14 tdpikselinizden daha büyük olan büyük bir yazı tipi boyutu .

— Alex
kaynak

5

Eğer Bootstrap kullanıyorsanız, bakmak paddingiçin bir tds.

— 1man
kaynak

1

aşağıdaki gibi satır içi CSS kullanarak belirli bir değerli satırın yüksekliğini düzeltmem gerektiğinde ..

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

— Md. Shafiqur Rahman
kaynak

1

Bana gelince, dolgu kullanmaya karar verdim. Tam olarak ihtiyacınız olan şey bu değildir, ancak bazı durumlarda faydalı olabilir.

table td {
    padding: 15px 0;
}

— Eugene Porodko
kaynak