Bisakah saya menggunakan min-height untuk table, tr atau td?

120

Saya mencoba untuk menunjukkan beberapa detail dari penerimaan dalam sebuah tabel.

Saya ingin meja itu memiliki tinggi minimal untuk menampilkan produk. Jadi jika hanya ada satu produk, tabel akan memiliki setidaknya beberapa spasi di bagian akhir. Di sisi lain, jika ada 5 produk atau lebih, itu tidak akan menjadi ruang kosong.

Saya sudah mencoba dengan css ini:

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

Tapi itu tidak berhasil.

Terima kasih sebelumnya.

html css kilkadg
sumber
1
Akan sangat membantu jika Anda membuat biola bagi kami untuk mencoba kode Anda.
mavrosxristoforos

Jawaban:

39

Ini bukan solusi yang bagus tapi cobalah seperti ini:

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

dan setel div ke min-height:

div {
    min-height: 300px;
}

Semoga ini yang Anda inginkan ...

Arnold Zak
sumber
2
@SackySan Anda perlu memberikan kelas div dan membuat aturan ini hanya berlaku untuk kelas itu
Zachary Weixelbaum
408

heightuntuk tdkarya seperti min-height:

td {
  height: 100px;
}

dari pada 

td {
  min-height: 100px;
}

Sel tabel akan bertambah jika isinya tidak pas.

https://jsfiddle.net/qz70zps4/

Aureliano Far Suau
sumber
2
Di Google Chrome saya (versi 47.0.2526.106 m) yang berjalan pada Windows 7, saya menemukan bahwa pengaturan heighta tdsebenarnya diproses sebagai paddingatas dan bawah, yang dapat menyebabkan beberapa masalah tata letak karena Anda pikir itu benar-benar heightruang. Ini tidak ditampilkan sebagai gaya atau gaya yang dihitung di alat dev, tetapi saat Anda mengarahkan mouse ke elemen html yang diperiksa, itu akan ditampilkan di layar.
Felypp Oliveira
tapi pertanyaannya ada di min-height yang tidak berhasil! apa yang terjadi jika Anda memiliki teks yang panjang dan membutuhkan baris lain dengan tinggi itu akan menjadi kacau
CMS
seperti yang dikatakan @CMS, dia bertanya tentang min-heighttidak, heighttetapi seperti yang dijelaskan @frank di bawah ini, perilakunya sama table td. Jadi mungkin ini membutuhkan penjelasan yang lebih baik.
dft
3
Ini jelas merupakan jawaban yang lebih baik daripada yang diterima.
Jinjubei
2
Jawaban ini baru saja menyelamatkan saya dari jam kerja yang potensial, seharusnya jawabannya.
Luke Pring
28

Solusi tanpa divmenggunakan elemen semu seperti baris ::afterpertama tddengan min-height. Simpan bersih HTML Anda.

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

Dalam CSS 2.1, efek 'min-height' dan 'max-height' pada tabel, tabel sebaris, sel tabel, baris tabel, dan grup baris tidak ditentukan.

Jadi coba gabungkan konten dalam div, dan berikan div a min-height jsFiddle di sini

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

jika Anda menyetel style = "height: 100px;" pada td jika td memiliki konten yang menumbuhkan sel lebih dari itu, itu akan melakukannya tidak perlu ketinggian min pada td.

jujur
sumber
0

Tabel dan sel tabel tidak menggunakan min-heightproperti, pengaturannya heightakan menjadi min-height karena tabel akan meluas jika konten merentangkannya.

Agu Dondo
sumber
-1

Cukup gunakan entri css min-height ke salah satu sel baris tabel Anda. Berfungsi di browser lama juga.

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