Bảng tràn bên ngoài Div

Question

Tôi đang cố gắng dừng một bảng có chiều rộng được khai báo rõ ràng là không tràn ra ngoài bố mẹ của nó div. Tôi đoán tôi có thể làm điều này một cách nào đó bằng cách sử dụng max-width, nhưng tôi dường như không thể làm việc này.

Các mã sau đây (với một cửa sổ rất nhỏ) sẽ gây ra điều này:

<style type="text/css"> 
    #middlecol { 
    width: 45%; 
    border-right:2px solid red; 
    } 
    #middlecol table { 
    max-width:100% !important; 
    } 
</style> 

<div id="middlecol"> 
    <center> 
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center"> 
     <tr> 
     <td bgcolor="#DDFFFF" align="center" colspan="2"> 
      <strong>Notification!</strong> 
     </td> 
     <tr> 
     <td width="50"> 
      <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0"> 
     </td> 
     <td> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </td> 
     </tr> 
    </table> 
    </center> 
</div> 

Đường màu đỏ là biên giới bên phải của div, và nếu bạn làm cửa sổ trình duyệt của bạn nhỏ, bạn sẽ thấy rằng bảng không phù hợp với nó.

Answer 1

Bật nó xung quanh bằng cách thực hiện:

<style type="text/css"> 
    #middlecol { 
    border-right: 2px solid red; 
    width: 45%; 
    } 

    #middlecol table { 
    max-width: 400px; 
    width: 100% !important; 
    } 
</style> 

Ngoài ra tôi sẽ tư vấn cho bạn:

• Không sử dụng thẻ center (nó bị phản đối)
• Không sử dụng width, bgcolor thuộc tính , đặt chúng theo CSS (width và background-color)

(giả định rằng bạn có thể kiểm soát các bảng đã được trả lại)

Answer 2

Có một width="400" trên bàn, gỡ bỏ nó và nó sẽ làm việc ...

Answer 3

Một tác phẩm thô xung quanh là để thiết lập display: table trên div chứa .

Answer 4

Bạn có thể ngăn các bảng mở rộng ra ngoài div cha mẹ bằng cách sử dụng table-layout:fixed.

CSS bên dưới sẽ làm cho các bảng của bạn mở rộng đến chiều rộng của div xung quanh nó.

table 
{ 
    table-layout:fixed; 
    width:100%; 
} 

Tôi đã tìm thấy thủ thuật này here.

Answer 5

Lúc đầu, tôi đã sử dụng phương pháp của James Lawruk. Tuy nhiên, điều này đã thay đổi tất cả các chiều rộng của td.

Giải pháp cho tôi là sử dụng white-space: normal trên các cột (được đặt thành white-space: nowrap). Bằng cách này các văn bản sẽ luôn luôn phá vỡ. Sử dụng word-wrap: break-word sẽ đảm bảo rằng mọi thứ sẽ bị vỡ khi cần thiết, thậm chí nửa chừng thông qua một từ.

CSS sẽ trông như thế này thì:

td, th { 
    white-space: normal; /* Only needed when it's set differntly somewhere else */ 
    word-wrap: break-word; 
} 

này có thể không luôn luôn là giải pháp mong muốn, như word-wrap: break-word có thể làm cho lời nói của bạn trong bảng không đọc được. Tuy nhiên nó sẽ giữ cho bảng của bạn có chiều rộng phù hợp.

Answer 6

Tôi đã thử tất cả các giải pháp được đề cập ở trên, sau đó không hoạt động. Tôi có 3 cái bên dưới cái kia. Người cuối cùng chảy qua.Tôi cố định nó bằng cách sử:

/* Grid Definition */ 
table { 
    word-break: break-word; 
} 

Đối với IE11 trong chế độ cạnh, bạn cần phải thiết lập này để word-break:break-all

Answer 7

tôi đã cố gắng gần như tất cả trên nhưng không làm việc cho tôi ... Sau đây đã

word-break: break-all; 

Điều này sẽ được thêm vào div mẹ (vùng chứa của bảng.)