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.

html css

— kilkadg
kaynak

1

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

— mavrosxristoforos

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

— Arnold Zak
kaynak

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/

— Aureliano Far Suau
kaynak

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

— Alex Omelnitckii
kaynak

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>

— Sobin Augustine
kaynak

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.

— dürüst
kaynak

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 .

— Agu Dondo
kaynak

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

— Sacky San
kaynak