18
Trong ví dụ bên dưới, cũng có sẵn here, cả WebKit (Safari 5, Chrome 10.0.648.205) và Mozilla (FF 4) giữ DIV div quanh chiều rộng có thể nhìn thấy của cửa sổ trình duyệt, trong khi TABLE là rộng như nội dung của nó.TABLE rộng hơn có chứa DIV
Tôi mong đợi DIV sẽ phát triển rộng như BẢNG, nhưng vì hành vi nhất quán trên các trình duyệt, tôi nghi ngờ đây là một tính năng chứ không phải là lỗi.
Điều thú vị là nếu DIV được đặt là có dấu phẩy: bên trái, it does grow as wide as the table.
Mọi giải thích?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Wide Table</title>
<style>
#container {
background-color:blue;
/* float:left;*/
}
</style>
</head>
<body>
<div id="container">
<table >
<tr id="tr">
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>
</div>
</body>
</html>
Câu hỏi của bạn đã trả lời câu hỏi của tôi! "Tăng trưởng" nổi là những gì tôi đang tìm kiếm. Thiết lập hiển thị cho inline-block cũng hoạt động, và là những gì tôi cuối cùng giải quyết trên. – Chris