Bảng chiều rộng 100% tràn div container

Question

Tôi đang gặp sự cố với bảng html đang tràn bộ chứa chính của nó. Tôi đã thiết lập a sample jsfiddle here để minh họa sự cố.

Làm cách nào để buộc cả văn bản tiêu đề và văn bản ô bảng được bọc theo cách nó sẽ vừa với vùng chứa của nó? Tôi muốn có một phương pháp CSS duy nhất nhưng tôi cũng mở để sử dụng Javascript (hoặc jQuery) nếu hoàn toàn cần thiết.

Answer 1

Từ một "làm cho nó phù hợp trong div" quan điểm thuần túy, thêm dòng sau vào lớp bảng của bạn (jsfiddle):

table-layout:fixed; 
width: 100%; 

_{Xem fixed so automatic bố trí bảng.}

Answer 2

Thêm display: block; và overflow: auto; to .my-table. Điều này sẽ chỉ đơn giản là cắt bỏ bất cứ điều gì vượt quá giới hạn 280px bạn thực thi. Không có cách nào để làm cho nó "trông khá" với yêu cầu đó do các từ như pélagosthrough rộng hơn 280px.

Answer 3

Vâng, với những hạn chế của bạn, tôi nghĩ rằng thiết lập overflow: scroll; trên .page div có lẽ là lựa chọn duy nhất của bạn. 280 px là khá hẹp, và cho kích thước phông chữ của bạn, từ gói một mình sẽ không làm điều đó. Một số từ chỉ dài và không thể được bao bọc. Bạn có thể giảm kích thước phông chữ của bạn một cách đáng kể hoặc đi với tràn: cuộn.

Answer 4

Hãy thử thêm

word-break: break-all 

với CSS trên yếu tố bảng của bạn.

Điều đó sẽ nhận được các từ trong các ô của bảng để phá vỡ sao cho bảng không phát triển rộng hơn div chứa của nó, nhưng các cột trong bảng vẫn có kích thước động. jsfiddle demo.

Answer 5

Hãy thử thêm vào td:

display: -webkit-box; // to make td as block 
word-break: break-word; // to make content justify 

tds tràn sẽ phù hợp với hàng mới.