làm thế nào để xác định chiều cao tối thiểu cho tbody trong css

Question

Tôi muốn thiết lập một chiều cao tối thiểu cho tbody trong css, ngay cả khi không <tr><td></td></tr> trong tbody, đây là mã của tôi:

tbody{ 
    height: 500px; 
    min-height:500px; 
} 

nhưng nó không hoạt động. vì vậy tôi nên làm gì để giải quyết vấn đề này? Cảm ơn.

Answer 1

Tại sao bạn muốn thực hiện việc này?

Áp dụng chiều cao và chiều cao cho các phần tử và bảng cấp khối không phải là yếu tố cấp khối. Quấn bảng của bạn bên trong một div (nói div.table-wrap) và áp dụng chiều cao tối thiểu cho div đó.

Nếu bạn không muốn bố cục bảng không quan trọng đối với bạn, thì chỉ cần thêm display:block vào CSS của tbody.

Answer 2

bạn cần thêm display: block; quá.

Answer 3

Có thể bạn đang sử dụng IE 5 hoặc 6. Tại sao không chỉ sử dụng chiều cao thay thế? Hãy thử loại bỏ chiều cao tối thiểu vì không có điểm nào trong việc thiết lập chiều cao và chiều cao tối thiểu trên cùng một phần tử bởi vì tất cả những gì bạn sẽ nhận được là chiều cao cố định và không phải là chiều cao tối thiểu.

Answer 4

Tôi nghĩ rằng điều này sẽ làm,

table{height:500px !important;} 

tại !important này sẽ làm cho nó tự nguyện, nó sẽ được ghi đè một cách dễ dàng bởi các thuộc tính khác.

tbody không mang đặc tính chiều cao.

nó chỉ mang 4 thuộc tính 'căn chỉnh', 'char', 'charoff' & 'valign' theo tiêu chuẩn hóa CSS.

cũng điều này sẽ hoạt động với ô có cùng kích thước và khoảng cách ô được thêm vào trong khoảng trống còn lại.

tbody{ 
    height:500px; 
    display:block; 
} 

Hãy thử và trả lời, tôi hy vọng điều này sẽ làm :)

Answer 5

Hope demo này sẽ làm việc cho bạn ...

Css:

tbody{ 
    height: auto; 
    min-height:200px; 
    display:block 
    } 

Fiddle

Answer 6

Chúng tôi cần chiều cao tối thiểu trên <tbody> vì chúng tôi không thể đưa vào danh sách HTML khác ents (nội dung người dùng). Tôi tìm thấy một sửa chữa.

Chiều cao hoạt động cho một bảng trống, nhưng không nếu bảng trống có một tbody trống trong Chrome (59) - nó hoạt động cho Firefox và Egde. Các trường hợp khác bị ẩn <tr> đã xảy ra sự cố, xem JSFiddle cho tất cả các trường hợp.

CSS:

.test { 
    border: 1px solid red; 
    height: 60px; 
} 

Html:

Empty table: 
<table class=test> 

</table> 

Empty tbody: 
<table class=test> 
    <tbody></tbody> 
</table> 

Chrome 59:

Edge (14), IE (11), Firefox (54):

Cố định này với:

tbody:before { 
    content: ''/* needed for chrome*/ 
} 

Xem updated JSFiddle