100% ширина таблицы переполнен контейнер Div


137

У меня проблемы с HTML-таблицей, которая переполняет родительский контейнер.

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}
<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

Как сделать так, чтобы текст заголовка и текст ячейки таблицы переносились так, чтобы он правильно помещался в своем контейнере? Я бы предпочел метод только CSS, но я также открыт для использования Javascript (или jQuery), если это абсолютно необходимо.

Ответы:


254

С точки зрения "сделай так, чтобы он подходил под div", добавь в класс таблицы следующее ( jsfiddle ):

table-layout: fixed;
width: 100%;

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

Для краткости, вот алгоритмы разметки таблиц, выделение мое:

  • Исправлено ( источник )
    При этом (быстром) алгоритме горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов и границ или расстояния между ячейками.
  • Автоматический ( источник )
    В этом алгоритме (который обычно требует не более двух проходов) ширина таблицы определяется шириной ее столбцов [как определяется содержимым] (и промежуточными границами ).

    [...] Этот алгоритм может быть неэффективным, поскольку он требует, чтобы пользовательский агент имел доступ ко всему содержимому таблицы до определения окончательного макета, и может потребовать более одного прохода.

Перейдите к исходной документации, чтобы увидеть особенности каждого алгоритма.


54

Попробуйте добавить

word-break: break-all 

в CSS на вашем элементе таблицы.

Это приведет к тому, что слова в ячейках таблицы будут разбиты так, что таблица не станет шире, чем содержащая ее div, но столбцы таблицы будут по-прежнему динамически изменяться. jsfiddle demo .


10
Еще лучше сword-wrap: break-word;
Аполо

1
@ Аполо - Согласен! Я также использовал это в своей оригинальной демоверсии jsfiddle (см. Ссылку в теле ответа выше).
Джон Шнайдер

1
Blink браузеры, word-break: break-wordкоторые работают лучше всего.
Volvox

overflow-wrapвместо этого лучше использовать свойство, так как оно стандартизировано
Ромко

18

Добавить display: block;и overflow: auto;к .my-table. Это просто отключит все, что превышает 280pxустановленный вами лимит. Невозможно сделать так, чтобы это выглядело «симпатично» из-за таких слов, pélagosthroughкоторые шире, чем 280px.


Только для моего случая: мне нужно, чтобы таблица соответствовала всей ширине родительского элемента (в высоких разрешениях), поэтому я окружил таблицу div и применил к ней ваши стили. Теперь таблица пытается использовать всю ширину родительского элемента, но если содержимое таблицы переполняется, появляется полоса прокрутки.
manuman94

2

Попробуйте добавить к td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

переполненные tds будут выровнены с новой строкой.


1

Что ж, учитывая ваши ограничения, я думаю, что установка overflow: scroll;на .pagediv - это, вероятно, ваш единственный вариант. 280 пикселей довольно узкие, и, учитывая размер шрифта, перенос слов не поможет. Некоторые слова просто длинные и не могут быть завернуты. Вы можете либо резко уменьшить размер шрифта, либо использовать overflow: scroll.


1

обновите ваш CSS следующим образом: это должно исправить

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.