Bảng tràn ra bên ngoài div

Tôi đang cố gắng ngăn một bảng có chiều rộng được khai báo rõ ràng khỏi tràn ra bên ngoài bảng cha của nó div. Tôi cho rằng tôi có thể làm điều này theo 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 cho điều này hoạt động.

Đoạn mã sau (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à đường viền bên phải của divvà nếu bạn làm cho cửa sổ trình duyệt của mình nhỏ lại, bạn sẽ thấy rằng bảng không vừa với nó.

Hãy xoay chuyển tình thế bằng cách:

<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ẽ khuyên bạn:

• Không sử dụng centerthẻ (nó không được dùng nữa)
• Không sử dụng width, bgcolorthuộc tính, hãy đặt chúng bằng CSS ( widthvà background-color)

(giả sử rằng bạn có thể kiểm soát bảng được hiển thị)

Bạn có thể ngăn các bảng mở rộng ra ngoài div mẹ của chúng 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 theo chiều rộng của div bao quanh nó.

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

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

Một công việc thô sơ xung quanh là đặt display: tabletrên div chứa.

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 bên dưới cái kia. Dòng cuối cùng đã qua. Tôi đã sửa nó bằng cách sử dụng:

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

Đối với IE11 ở chế độ cạnh, bạn cần đặt điều này thành word-break:break-all

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ả chiều rộng củatd 's.

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

Sau đó CSS ​​sẽ trông như thế này:

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

Đây có thể không phải lúc nào cũng là giải pháp mong muốn, vì word-wrap: break-wordcó thể làm cho các từ của bạn trong bảng trở nên khó đọc. Tuy nhiên, nó sẽ giữ cho bảng của bạn có chiều rộng phù hợp.

Tôi đã thử gần như tất cả các cách trên nhưng không hiệu quả với tôi ...

word-break: break-all;

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

overflow-x: auto;
overflow-y : hidden;

Áp dụng kiểu ở trên cho div chính.

Có một cái width="400"trên bàn, hãy xóa nó đi và nó sẽ hoạt động ...