Как создать сайт

Как задать ширину столбцов таблицы

Проблема

Хотя мы уже очень давно прекратили использовать таблицы для создания макетов, они все же занимают достойное место на современных веб-сайтах: они используются для отображения таких табличных данных, как статистика, сообщения электронной почты, перечисления элементов с большим объемом метаданных и многого другого.

Кроме того, мы можем заставлять другие элементы демонстрировать свойства, характерные для таблицы, используя ключевые слова свойства  display , связанные с таблицами. Однако каким бы удобным инструментом они ни были в определенных обстоятельствах, макет таблиц ведет себя очень непредсказуемо, когда дело доходит до динамического содержимого.

Причина этого в том, что размеры столбцов корректируются в зависимости от объема содержимого, и даже явные объявления  width считаются не более чем подсказками, как видно на риcунке ниже.

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

Решение

Решение приходит в форме малоизвестного свойства CSS 2.1 под названием table-layout . Его значение по умолчанию равно  auto , что определяет так называемый алгоритм автоматического расчета табличного макета, демонстрирующий знакомое поведение, показанное на рисунке. Однако у него есть и второе значение,  fixed , обеспечивающее более предсказуемое поведение. Оно дает большую свободу действий разработчику (да, вам!), снимая часть ответственности с механизма визуализации.

 

Стили действительно принимаются во внимание и не считаются простыми подсказками, переливание через край происходит так же, как с любым другим элементом (включая  text-overflow ), а содержимое таблицы влияет только на высоту каждой строки и больше ни на что. Помимо лучшей предсказуемости и удобства, алгоритм фиксированного табличного макета работает значительно быстрее.

Читайте также  Как сделать липкие колонтитулы

Поскольку содержимое таблицы не влияет на ширину ячеек, никакие элементы во время загрузки страницы не перерисовываются. Всем нам знакома ситуация, когда по мере загрузки страницы таблица постоянно перерисовывается из-за изменения ширины столбцов. С фиксированными табличными макетами об этом можно забыть. Чтобы воспользоваться этой возможностью, необходимо установить данное свойство для элементов  <table> и элементов со свойством  display: table .

Обратите внимание, что для того, чтобы фокус сработал, необходимо обязательно задать значение ширины для этих таблиц (даже если оно равно  100% ). Кроме того, для того чтобы работало свойство  text-overflow: ellipsis , следует также задать ширину соответствующего столбца. Вот и все! Результаты вы видите на рисунке.

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/table-column-widths

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

88 − = 87

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: