Dưới đây là một câu đố làm việc với số lượng ô không xác định: http://jsfiddle.net/r9yrM/1/
Bạn có thể sửa chiều rộng cho mỗi phụ huynh div
( bảng ), nếu không, nó sẽ là 100% như bình thường.
Mẹo là sử dụng table-layout: fixed;
và một số chiều rộng trên mỗi ô để kích hoạt nó, ở đây là 2%. Điều đó sẽ kích hoạt bảng algorightm khác, bảng mà trình duyệt cố gắng hết sức để tôn trọng kích thước được chỉ định.
Vui lòng kiểm tra với Chrome (và IE8- nếu cần). Nó ổn với một Safari gần đây nhưng tôi không thể nhớ khả năng tương thích của thủ thuật này với chúng.
CSS (hướng dẫn liên quan):
div {
display: table;
width: 250px;
table-layout: fixed;
}
div > div {
display: table-cell;
width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}
EDIT (2013): Cẩn thận với Safari 6 trên OS X, nó có table-layout: fixed;
lỗi (hoặc có thể chỉ khác, rất khác so với các trình duyệt khác. Tôi đã không đọc bằng cách bố trí bảng CSS2.1 REC;)). Hãy chuẩn bị cho các kết quả khác nhau.