Tabel meluap di luar div

Saya mencoba menghentikan tabel yang memiliki lebar yang secara eksplisit dinyatakan meluap di luar induknya div. Saya kira saya bisa melakukan ini dengan beberapa cara menggunakanmax-width , tapi sepertinya bekerja.

Kode berikut (dengan jendela yang sangat kecil) akan menyebabkan ini:

<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>

Garis merah adalah batas kanan dari div, dan jika Anda membuat jendela browser Anda kecil, Anda akan melihat bahwa tabel tidak muat di dalamnya.

Putar balik dengan melakukan:

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

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

Saya juga menyarankan Anda untuk:

• Tidak menggunakan center tag (sudah tidak digunakan lagi)
• Jangan gunakan width, bgcoloratribut, atur dengan CSS ( widthdan background-color)

(dengan asumsi bahwa Anda dapat mengontrol tabel yang dirender)

Anda bisa mencegah tabel meluas di luar div induknya dengan menggunakan table-layout:fixed.

CSS di bawah ini akan membuat tabel Anda melebar selebar div yang mengelilinginya.

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

Saya menemukan trik ini di sini .

Sebuah pekerjaan kasar sekitar adalah untuk mengatur display: tablediv berisi.

Saya mencoba semua solusi yang disebutkan di atas, kemudian tidak berhasil. Saya memiliki 3 tabel satu di bawah yang lain. Yang terakhir meluap. Saya memperbaikinya menggunakan:

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

Untuk IE11 dalam mode tepi, Anda perlu mengatur ini ke word-break:break-all

Awalnya saya menggunakan metode James Lawruk. Namun ini mengubah semua lebar filetd itu.

Solusi bagi saya adalah menggunakan white-space: normal kolom (yang diatur ke white-space: nowrap). Dengan cara ini teks akan selalu rusak. Menggunakan word-wrap: break-wordakan memastikan bahwa semuanya akan rusak saat dibutuhkan, bahkan di tengah kata.

CSS akan terlihat seperti ini:

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

Ini mungkin tidak selalu menjadi solusi yang diinginkan, karena word-wrap: break-worddapat membuat kata-kata Anda di tabel tidak terbaca. Namun itu akan membuat tabel Anda memiliki lebar yang tepat.

Saya mencoba hampir semua cara di atas tetapi tidak berhasil untuk saya ... Berikut ini berhasil

word-break: break-all;

Ini akan ditambahkan pada div induk (wadah tabel.)

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

Terapkan gaya di atas ke div induk.

Anda dapat mencoba CSS ini. Saya selalu mengalaminya bekerja.

div {
  border-style: solid;
  padding: 5px;
}

table {
  width: 100%;
  word-break: break-all;
  border-style: solid;
}

<div style="width:200px;">
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
      <td>data 4</td>
      <td>data 5</td>
    </tr>
    <table>
</div>

Ada di width="400"atas meja, keluarkan dan itu akan berhasil ...