Html bảng với chiều rộng 100% không làm việc với văn bản dài

Question

Tôi có cơ cấu như sau

<table cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE HERE 
     </div> 
    </td> 
</tr> 
... 
</table> 

Các td đầu tiên diễn 60px, điều thứ hai sẽ đưa phần còn lại của 100%, nhưng khi tôi có một số dài văn bản không có dấu cách và không có dấu gạch ngang bảng trở nên lớn hơn sau đó là 100%. Cách hiển thị văn bản không thể phá vỡ trong một dòng hoặc trên nhiều dòng (cả hai cách đều được chấp nhận) và giữ bảng trên 100% màn hình? Tôi đã cố khắc phục điều này với chế độ tràn bị ẩn nhưng không có hiệu lực. Đây là ảnh chụp màn hình của sự cố: link

Answer 1

Đặt table-layout : fixed trong css của bạn hoặc <table style='table-layout : fixed'> rằng Oughta sửa chữa nó.

Đây là code sample. Kiểm tra nó ra.

Answer 2

Có thuộc tính CSS3, word-wrap:break-word; thực hiện chính xác những gì bạn cần. Nhưng tiếc là nó không hoạt động với các ô bảng. Tôi nghĩ bạn cần phải suy nghĩ lại về cấu trúc của mình, chọn thiết kế ít bàn hơn.

tôi đã viết ví dụ này cho bạn

<style> 
section { /* your table */ 
    display:block; 
    width:300px; 
    background-color:#aaf; 
} 
section:after {display:block; content:''; clear:left} 

div { /* your cells */ 
    float:left; 
    width:100px; 
    background-color:#faa; 
    word-wrap:break-word; 
} 
</style> 

<section> 
    <div>Content.</div> 
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div> 
</section> 

Tái bút: word-wrap được hỗ trợ trong IE 5.5+, Firefox 3.5+, và trình duyệt WebKit như Chrome và Safari.

Answer 3

hãy thử như sau:

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE no longer HERE ! 
     </div> 
    </td> 
</tr> 
... 
</table>