Tabela przepełniona poza div

Próbuję powstrzymać tabelę, która ma jawnie zadeklarowaną szerokość, przed przepełnieniem poza jej rodzica div. Przypuszczam, że mogę to zrobić w jakiś sposób za pomocą max-width, ale nie wydaje mi się, aby to działało.

Następujący kod (z bardzo małym oknem) spowoduje to:

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

Czerwona linia jest prawą krawędzią div, a jeśli zmniejszysz okno przeglądarki, zobaczysz, że tabela nie pasuje do niego.

Odwróć to, wykonując:

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

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

Radziłbym również:

• Nie używaj centertagu (jest wycofany)
• Nie używać width, bgcoloratrybuty, ustawić je przez CSS ( widthi background-color)

(zakładając, że możesz kontrolować renderowaną tabelę)

Możesz zapobiec rozszerzaniu tabel poza ich nadrzędny element div, używając table-layout:fixed.

Poniższy kod CSS spowoduje rozszerzenie tabel do szerokości otaczającego je elementu div.

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

Znalazłem tę sztuczkę tutaj .

Prostym rozwiązaniem jest ustawienie display: tablezawierającego div.

Wypróbowałem wszystkie powyższe rozwiązania, ale nie działały. Mam 3 tabele jeden pod drugim. Ostatnia przelała się. Naprawiłem to za pomocą:

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

W przypadku IE11 w trybie krawędzi musisz ustawić to na word-break:break-all

Na początku użyłem metody Jamesa Lawruka. To jednak zmieniło wszystkie szerokości plików td.

Rozwiązaniem dla mnie było użycie white-space: normalna kolumnach (które było ustawione na white-space: nowrap). W ten sposób tekst zawsze będzie się łamał. Użycie word-wrap: break-wordzapewni, że wszystko się zepsuje, gdy będzie to potrzebne, nawet w połowie słowa.

CSS będzie wtedy wyglądać następująco:

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

Nie zawsze jest to pożądane rozwiązanie, ponieważ word-wrap: break-wordTwoje słowa w tabeli mogą być nieczytelne. Dzięki temu stół będzie miał odpowiednią szerokość.

Próbowałem prawie wszystkich powyższych, ale nie zadziałało ... Następujące zrobiły

word-break: break-all;

Należy to dodać do nadrzędnego elementu DIV (kontenera tabeli).

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

Zastosuj powyższy styl do nadrzędnego elementu DIV.

Możesz spróbować tego CSS. Doświadczyłem tego zawsze.

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>

Jest width="400"na stole, wyjmij go i będzie działać ...