Стол, переполненный вне диванов

Я пытаюсь остановить таблицу с шириной, явно объявленной не переполнением за ее пределами parent 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, и если вы сделаете окно браузера маленьким, вы увидите, что таблица не вписывается в него.

Ответ 1

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

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

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

Ответ 2

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

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

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

Я нашел этот трюк здесь.

Ответ 3

Грубая работа заключается в том, чтобы установить display: table на содержащий div.

Ответ 4

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

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

Для IE11 в режиме edge вам нужно установить это на word-break:break-all

Ответ 5

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

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

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

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

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

Ответ 6

Я попробовал почти все вышеперечисленное, но у меня ничего не вышло... Следующее помогло

word-break: break-all;

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

Ответ 7

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

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

Ответ 8

Там a width="400" на столе, удалите его, и он будет работать...