Таблица переполнена за пределами div

Я пытаюсь предотвратить переполнение таблицы, ширина которой явно указана, за пределами ее родительского элемента div. Я предполагаю, что могу сделать это каким-то образом max-width, но мне кажется, что это не работает.

Следующий код (с очень маленьким окном) вызовет это:

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

Красная линия - это правая граница div, и если вы сделаете окно браузера маленьким, вы увидите, что таблица в него не помещается.

Поверните его, выполнив:

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

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

Также я бы посоветовал вам:

• Не использовать centerтег (он устарел)
• Не используйте width, bgcolorатрибуты, установите их с помощью CSS ( widthа background-color)

(при условии, что вы можете управлять таблицей, которая была отрисована)

Вы можете предотвратить расширение таблиц за пределы родительского div, используя table-layout:fixed.

Приведенный ниже CSS заставит ваши таблицы расшириться до ширины окружающего его div.

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

Я нашел здесь эту уловку .

Грубая работа - установить display: tableсодержащий div.

Я пробовал все упомянутые выше решения, но ничего не вышло. У меня есть 3 таблицы одна под другой. Последний перетек. Я исправил это с помощью:

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

Для IE11 в пограничном режиме вам необходимо установить для него значение word-break:break-all

Сначала я использовал метод Джеймса Лоурука. Однако это изменило всю ширинуtd 's.

Решением для меня было использование white-space: normalстолбцов (для которых было установлено значение white-space: nowrap). Таким образом текст всегда будет ломаться. Использование word-wrap: break-wordгарантирует, что при необходимости все сломается, даже на полуслове.

Тогда CSS будет выглядеть так:

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

Это не всегда может быть желательным решением, так как word-wrap: break-wordваши слова в таблице могут быть неразборчивыми. Однако это сохранит вашу таблицу правильной ширины.

Я пробовал почти все вышеперечисленное, но у меня не получилось ...

word-break: break-all;

Это будет добавлено в родительский div (контейнер таблицы).

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

Примените стиль выше к родительскому div.

Вы можете попробовать этот CSS. Я всегда видел, как это работает.

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>

На width="400"столе есть, уберите и заработает ...