Chỉ định chiều rộng phần trăm cho các ô bảng CSS

Question

Tôi đang cố tạo lịch tuần dựa trên HTML/CSS bằng cách sử dụng màn hình CSS: tạo kiểu bảng ô trên các div tương ứng với mỗi ngày. Khi tôi chỉ định chiều rộng phần trăm cho các div ngày lớn hơn 17%, các div sẽ lấp đầy toàn bộ màn hình như mong đợi (từ 7 * 17%> 100%).

jsfiddle đây: http://jsfiddle.net/huDxZ/1/

Tuy nhiên, khi tôi chỉ định chiều rộng phần trăm đó là 16% hoặc ít hơn, các divs cư xử hoàn toàn khác nhau, chiếm chỉ là một phần của chiều rộng trang.

jsfiddle đây: http://jsfiddle.net/DLjnH/

Tôi muốn divs ngày của tôi để mỗi người đều có độ rộng khoảng 14% nên họ gần choán hết chiều rộng của trang và có kích thước bằng nhau. Thật không may, chiều rộng 14% trông thậm chí còn tồi tệ hơn.

jsfiddle ở đây: http: //jsfiddle.net/YB5bY/

gì đang gây ra hành vi bất ngờ này? Có cách nào xung quanh nó không? Tôi cần xác định rõ độ rộng vì cuối cùng tôi muốn các ngày của lịch mở rộng khi di chuột qua.

Xin vui lòng, không có giải pháp nào liên quan đến phao nổi.

Cảm ơn!

Answer 1

quy tắc CSS tỷ lệ phần trăm giá trị luôn luôn liên quan đến giá trị của cùng một thuộc tính của cha mẹ.
Hãy thử thêm một chiều rộng rõ ràng để các container:

#calendar { 
    display: table; 
    height:900px; 
    width: 100%; 
} 

Các bạn có thể sử dụng 14% cho ".day" yếu tố:

DEMO

Answer 2

Vâng, tôi có thể phát điên, nhưng tôi sẽ sử dụng một bảng cho một điều như vậy ...

Không phải tất cả bảng là ác, chỉ là những người sử dụng để bố trí ...

Answer 3

Tôi không thể cho bạn biết lý do nhưng nếu bạn buộc các container div để có 100% chiều rộng hành vi của hai trường hợp là giống hệt nhau.

#calendar { 
    display: table; 
    height:900px; 
    width: 100%; 
} 

phiên bản Cập nhật: http://jsfiddle.net/DLjnH/1/

Answer 4

của bạn rộng ô trong bảng là tương đối so với chiều rộng bậc cha mẹ, nhưng các bậc phụ huynh với là tự động/không xác định. Thêm width: 100%; vào định nghĩa css #calendar để chúng hoạt động chính xác.