Tôi có thể sử dụng chiều cao tối thiểu cho bảng, tr hoặc td không?

Question

Tôi đang cố gắng hiển thị một số chi tiết về việc nhận trong bảng.

Tôi muốn bảng đó có chiều cao tối thiểu để hiển thị sản phẩm. Vì vậy, nếu chỉ có một sản phẩm, bảng sẽ có ít nhất một khoảng trắng ở cuối. Mặt khác, nếu có từ 5 sản phẩm trở lên, nó sẽ không phải là khoảng trống.

Tôi có thử với css này:

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

Nhưng nó không phải đang làm việc.

Xin cảm ơn trước.

Answer 1

Nó không phải là một giải pháp tốt đẹp nhưng hãy thử nó như thế này:

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

và thiết lập các div đến min-height:

div { 
    min-height: 300px; 
} 

Hope đây là những gì bạn muốn ...

Answer 2

Trong CSS 2.1, hiệu ứng của 'min-height' và 'max-height' trên bảng, bảng nội tuyến, ô bảng, hàng bảng và nhóm hàng không xác định.

Vì vậy, cố gắng gói nội dung trong một div, và cung cấp cho các div một min-height jsFiddle here

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

Answer 3

height cho td công trình như min-height

http://fiddle.jshell.net/qz70zps4/

Answer 4

nếu bạn thiết lập style = "chiều cao: 100px;" trên một td nếu td có nội dung phát triển các tế bào nhiều hơn thế, nó sẽ làm như vậy không cần cho chiều cao min trên một td.

Answer 5

Giải pháp không có div được sử dụng một phần tử giả như ::after vào đầu tiên td liên tiếp với min-height. Lưu HTML của bạn sạch sẽ.

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

Answer 6

Chỉ cần sử dụng mục nhập css chiều cao tối thiểu đến một trong các ô của hàng trong bảng. Cũng hoạt động trên các trình duyệt cũ.

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