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

96

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

waiwai933
источник
2
Не по теме: не использовать <center>. Он устарел в течение многих лет. Кроме того, у вас уже есть align="center"на столе.
ЯegDwight
К сожалению, я не могу это контролировать. Содержимое внутри div фактически включено из файла, созданного не мной. Я могу только прикоснуться к CSS, но я бы исключил <center>, если бы мог.
waiwai933

Ответы:

24

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

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

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

Зифракс
источник
Если я сделаю width: 100%, он игнорирует мой margin: right. который вызывает прокрутку горизонтальной полосы
Джесси
210

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

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

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

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

Джеймс Лорук
источник
63
Это заставляет все столбцы иметь одинаковую ширину ... не очень полезно,
Серж Саган
11
На самом деле вы все равно можете сделать столбцы разной ширины, вам просто нужно указать ширину в <col>s или на первой строке <td>(вместо того, чтобы позволить ей течь в зависимости от размера текста). Из MDN: «фиксировано: ширина таблицы и столбца устанавливается шириной элементов table и col или шириной первой строки ячеек. Ячейки в последующих строках не влияют на ширину столбцов».
philfreo
1
Спасибо большое. Вы очень помогли мне ...
Parthan_akon
67

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

Questzen
источник
8
Это великолепно, именно то, что я искал. Чтобы помочь другим, вот несколько строк, доступных в Google: я пытался использовать CSS, чтобы подогнать родительский div к переполнению, или подогнать фон для покрытия переполненного содержимого таблицы. Это сработало отлично, большое спасибо!
trisweb
Просто добавление, обратите внимание на контекст, в котором это применяется, это используется для придания макета таблицы, такого как поведение и, следовательно, наличие других атрибутов стиля, таких как table-row, table-cell. Табличные макеты не всплывают. Во время одного свойства display: table недостаточно
questzen
Также пришел сюда после нескольких часов поиска ответа. Строки для поисковой системы: таблица внутри div не прокручивается, firefox. Div с таблицей не будет прокручиваться, firefox. Внутри div нет таблицы полос прокрутки.
anevaude
2
Я пробовал несколько вещей, но я просто добавил display: table в верхний родительский div. Проблема решилась, спасибо.
Günay Gültekin
Лучшее решение для таблиц с длинными именами заголовков и длинным содержимым ячеек. Спасибо!.
Ege Bayrak
34

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

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

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

Мистер Думсбастер
источник
12

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

Сандер Коэдуд
источник
5

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

word-break: break-all;

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

Вахид Асгар
источник
1
overflow-x: auto;
overflow-y : hidden;

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

Кристиан Хит
источник
0

Вы можете попробовать этот 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>

Канаб Пол
источник
2
Пожалуйста, не публикуйте одинаковые ответы на несколько вопросов. Вместо этого просто ответьте на один и прокомментируйте (или отметьте / закройте голосование, как только у вас появится репутация), что остальные дублируются. Для справки, я имею в виду stackoverflow.com/a/63741405/2756409 , stackoverflow.com/a/63741355/2756409 и stackoverflow.com/a/63741938/2756409
TylerH
Кроме того, просьба предоставлять только ответы, содержащие что-то новое. Это решение word-break: break-wordуже было предоставлено многими, многими ответами.
TylerH,
@TylerH Спасибо за ваше предложение.
Канаб Пол,
-3

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

дол
источник