Стол переполнен за пределами Div

Question

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

Answer 1

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

Приведенный ниже CSS увеличит ваши таблицы до ширины окружающего их элемента div.

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

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

Answer 2

Необработанный обходной путь - установить display: table для содержащего элемента div.

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

Сначала я использовал метод Джеймса Лаврука. Это, однако, изменило всю ширину 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 может сделать ваши слова в таблице неразборчивыми. Однако ваш стол будет иметь правильную ширину.

Answer 6

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

word-break: break-all;

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

Answer 7

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