Table, tr veya td için min-height kullanabilir miyim?


120

Tabloda bir alımın bazı ayrıntılarını göstermeye çalışıyorum.

Ürünleri göstermek için bu tablonun minimum yüksekliğe sahip olmasını istiyorum. Yani tek bir ürün varsa, tablonun sonunda en azından biraz beyaz boşluk olacaktır. Öte yandan 5 veya daha fazla ürün varsa, o kadar boş alan olmayacaktır.

Bu css ile denedim:

table,td,tr{
  min-height:300px;
}

Ama bu çalışmıyor.

Şimdiden teşekkürler.


1
Kodunuzu denememiz için bir keman oluşturmanız yararlı olacaktır.
mavrosxristoforos

Yanıtlar:


39

Bu güzel bir çözüm değil ama şöyle deneyin:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

ve div'leri minimum yüksekliğe ayarlayın:

div {
    min-height: 300px;
}

Umarım istediğin budur ...


2
@SackySan, divs sınıflarını vermeniz ve sonra bu kuralı yalnızca o sınıf için geçerli kılmanız gerekir
Zachary Weixelbaum

Hiç hoş değil!
Ahmed

408

heighttdgibi işler için min-height:

td {
  height: 100px;
}

onun yerine

td {
  min-height: 100px;
}

İçerik sığmadığında tablo hücreleri büyüyecektir.

https://jsfiddle.net/qz70zps4/


2
Bir Windows 7 üzerinde çalışan Google Chrome (sürüm 47.0.2526.106 m), ben ayar bulundu heighta tdaslında bir şekilde işlenir paddingEğer gerçekten düşünüyorum gibi bazı düzen sorunu tanıtmak olabilir alt ve üst, heightuzay. Geliştirici araçlarında bir stil veya hesaplanmış bir stil olarak gösterilmez, ancak farenizi incelenen html öğesinin üzerine getirdiğinizde ekranda gösterilir.
Felypp Oliveira

ama soru işe yaramayan min-yükseklik hakkındaydı! uzun bir metniniz varsa ve yüksekliği olan başka bir satıra ihtiyaç duyarsanız ne olur,
CMS

@CMS Dediğim gibi o sordu min-heightdeğil height@frank bunun için aynı şekilde davranır aşağıda açıkladığı gibi ancak table td. Bu yüzden belki bunun biraz daha iyi bir açıklamaya ihtiyacı var.
dft

3
Bu kesinlikle kabul edilenden daha iyi bir cevap.
Jinjubei

2
Bu cevap beni potansiyel olarak çalışma saatlerinden kurtardı, cevap olmalı.
Luke Pring

28

Olmayan çözüm div, ile satırda ::afterilk gibi sözde bir öğe kullanılır . HTML'nizi temiz kaydedin.tdmin-height

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

13

CSS 2.1'de, 'min-height' ve 'max-height'in tablolar, satır içi tablolar, tablo hücreleri, tablo satırları ve satır grupları üzerindeki etkisi tanımsızdır.

Bu yüzden içeriği bir div içine sarmayı deneyin ve burada div'e jsFiddle verinmin-height

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

5

style = "height: 100px;" ayarlarsanız td'de hücreyi bundan daha fazla büyüten içerik varsa, td'de minimum yüksekliğe gerek kalmaz.


0

Tablolar ve tablo hücreleri min-heightözelliği kullanmaz height; içerik onları genişletirse tablolar genişleyeceği için minimum yükseklik olacak şekilde ayarlanır .


-1

Basitçe min-yüksekliğin css girişini tablo satırınızdaki hücrelerden birine kullanın. Eski tarayıcılarda da çalışır.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.