Таблиця переповнена за межами 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.

Рішенням для мене було використання 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.

На width="400"столі є, приберіть його, і воно буде працювати ...