Ширина таблицы выходит за рамки div

У меня есть таблица в div. Если я просмотрю его с помощью IE9 или FF, тогда это нормально. Но если я рассматриваю его в IE8, таблица становится выше границы div. Любые идеи?

<div>
  <table width="100%" >
    <tr>
      <td>
      </td>
    </tr>
  </table>
</div>

Ответы

Ответ 1

нашел решение здесь:

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

Хитрость заключается в использовании свойства CSS table-layout. Это может занять три значения: auto, fixed и inherit. Нормальное (начальное) значение авто, это означает, что ширина таблицы задается ее столбцами, а любая границы. Другими словами, он при необходимости расширяется.

То, что вы хотите использовать, - table-layout:fixed. Бам! Теперь таблица выглядит так: как вы указали в CSS. Не больше, не меньше. И к моему большой сюрприз, похоже, широко поддерживается браузерами. Единственный браузером любого значения, которое его не поддерживает, является IE/Mac и значение этого браузера быстро приближается к нулю.

Далее мы решаем, что делать с содержимым, которое не вписывается в стол больше. Если таблица содержит только текст, word-wrap: break-word (word-wrap указан в модуле текстовых эффектов CSS3) заставит браузер должен сломать слова, необходимые для предотвращения переполнения.

Ответ 2

Вы можете установить его внутри своего собственного div с помощью overflow: scroll;, чтобы он создавал полосу прокрутки, когда таблица слишком сильно расширяется...

Ответ 3

Дайте ширину таблицы как 100%, чтобы она занимала div и не пересекала ее.

Ответ 4

Добавьте стиль display:table в тег div. Это заставляет элемент действовать как таблица.

Ответ 5

Как user384080 упомянутый, table-layout:fixed следует добавить. Однако простое условие table-layout не всегда устраняет проблему. Убедитесь, что вы добавили атрибут width:

<table style="width:100%;table-layout:fixed">

Ответ 6

проверьте, какой размер окна задается браузером по умолчанию.

box-sizing: content-box; означает:

Указанная ширина и высота применяются к ширине и высоте соответственно поля содержимого элемента. заполнение и граница элемента за пределами этой области.

box-sizing: border-box; означает:

Указанная ширина и высота определить поле границы элемент. Любая прокладка или граница указанный на элементе внутри оставшейся области. Контент поле вычисляется путем вычитания заполнение или ширина границ соответствующие стороны от указанного ширины и высоты.

В эту ночь просто нужно изменить значение box-sizing. здесь есть статья об этом: http://ie8demo.com/BoxSizing.aspx

Ответ 7

У вас есть ширина, установленная на div? Если это так, он будет придерживаться своей ширины, позволяя таблице перекрываться. Попробуйте удалить ширину, и она будет расширяться до ширины контейнера. Если вы хотите, чтобы div div соответствовал размеру таблицы, вы можете его плавать.