table-layout¶
Свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Демо¶
Синтаксис¶
/* Keyword values */ table-layout: auto; table-layout: fixed; /* Global values */ table-layout: inherit; table-layout: initial; table-layout: revert; table-layout: revert-layer; table-layout: unset; Значения¶
Значение по-умолчанию: auto
Применяется к тегу или к элементу, у которого значение display установлено как table или inline-table .
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
html> head> meta charset="utf-8" /> title>table-layouttitle> style> table table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ > .col1 width: 160px; > .coln width: 60px; > style> head> body> table border="1"> col class="col1" /> col span="9" class="coln" /> tr> td>td> td>2012td> td>2013td> td>2014td> td>2015td> td>2016td> td>2017td> td>2018td> td>2019td> td>2020td> tr> tr> td>Нефтьtd> td>5td> td>7td> td>2td> td>8td> td>3td> td>34td> td>62td> td>74td> td>57td> tr> tr> td>Золотоtd> td>3td> td>6td> td>4td> td>6td> td>4td> td>69td> td>72td> td>56td> td>47td> tr> tr> td>Деревоtd> td>5td> td>8td> td>3td> td>4td> td>7td> td>73td> td>79td> td>34td> td>86td> tr> table> body> html> Особенности таблиц
Чтобы понимать, что можно ожидать от таблиц при вёрстке, следует знать их явные и неявные особенности, которые перечислены далее.
Вложенные таблицы
Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, в роли обычной таблицы.
Размеры таблицы
Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров:
- ширина содержимого ячеек;
- толщина всех границ между ячеек;
- поля вокруг содержимого, устанавливаемые через атрибут cellpadding ;
- расстояние между ячейками, которое определяется значением cellspacing .
Если для таблицы установлена её ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры. Чтобы избежать указанной ситуации применяют несколько средств.
Пример 2.1. Использование table-layout
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера зависит от браузера. В старых браузерах рисунок за пределами ячейки обрезается (рис. 2.1а), в современных браузерах рисунок выводится поверх второй ячейки (рис. 2.1б).
а. Вид таблицы в IE6, IE7, Firefox 2
б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome
Рис. 2.1. Использование table-layout
Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden . При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. 2.1а. Стиль в этом случае изменится незначительно.
Высота ячеек
Ячейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты. В примере 2.2 приведён такой макет, в котором, несмотря на разную высоту контента, колонки равны по высоте.
Пример 2.2. Колонки одной высоты
XHTML 1.0 CSS 2.1 IE 9 Cr Op Sa Fx
Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности. Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности.
Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень.
Результат примера показан на рис. 2.2.
Рис. 2.2. Макет, созданный с использованием таблицы
В данном примере в ячейках разное содержание, но высота ячеек одинакова.
Порядок ячеек
Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо и сверху вниз (рис. 2.3).
Рис. 2.3. Порядок создания ячеек
Неудобства этой схемы проявляются при активном использовании колонок и большом числе ячеек. Конечно, есть теги и , но их возможности ограничены. Вставка новых ячеек или редактирование существующих может привести к ошибкам отображения таблицы.
Загрузка таблицы
Пока таблица не загрузится полностью, её содержимое не начнёт отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого нужно знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 Кб). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout , применение которого позволяет несколько повысить скорость отображения содержимого таблицы. В обычной таблице браузер анализирует все ячейки и затем уже изменяет ширину колонок на основе этой информации. Включение table-layout со значением fixed меняет алгоритм расчета — браузер анализирует только первую строку и ширину колонок строит согласно ей. За счёт уменьшения числа вычислений и происходит выигрыш скорости отображения таблицы в целом.
Как установить высоту для строк таблицы?
Подскажите как установить высоту для содержимого таблицы, чтобы не было простыни текста как в коде. Структура приходит динамично , но статична только таблица , ну то есть table->tbody->tr->td
И нужно чтобы была макс высота у ячеек на случай если текста много. В результате должна быть таблица с одинаковыми по высоте ячейками
Простой 16 комментариев
Задайте размеры span’у и нужный overflow.
Но это не точно.
Потому что формулировка «чтобы не было простыни текста» не однозначна и самый напрашивающийся не имеющий отношения к высоте ответ: удалите эту простыню.
overflow-y:scroll;
ты для начала сформулируй что ты хочешь получить на выходе
тут не экстрасенсы сидят
Излишки текста-то куда деваться должны?
Скрываться или ширина таблицы должна увеличиваться (т.е. горизонтальная прокрутка у body или оборачивающего блока) или еще как-нибудь.
John Johnson, тогда я написала ответ в первом комментарии, задавайте размеры спану.
Альтернатива: обрезать текст js’ом или сразу на бэке.
У тебя таблица такая.
Как ты хочешь ей высоту задать, у тебя и так все ячейки одной высоты? Давай примеры.
irishmann,
Примерно вот такое хочу увидеть.
Ситуация такая с бека приходит простыня текста и нужно показывать малую часть на фронте, а при ховере уже в тултипе показывать всё.
И у меня проблема в первой части этой формулировки, я не могу ужать ячейки таблиц. Ну то есть таких tr может быть страниц на 100 и получается огромная простыня в случае если текста много приходит.
И я надеялся что всё же можно ужать tr или td по высоте чтобы они были фиксированной не такой огромной высоты как на скрине что ты прислал.
Ну и ещё момент что я не вижу содержимое структуры таблицы. То есть где-то есть span где то его нет. Стили могу задать только для таблицы , ячеек и tr
Как сделать ячейку таблицы фиксированного размера, вне зависимости от контента
Вот есть некая разметка таблицы. Она предназначена чтобы на сайте было справа типо ссылки всякие, а справа само содержание статьи. По началу я сделал это и вроде всё норм, но вот решил тестануть и добавить ссылку с большим текстом, после чего результат получился как на скрине. А нужно чтобы всегда была ширина ячейки «col-md-3 col-sm-3 col-xs-2». Не понимаю как это реализовать . На классы не смотрите, там они пока что просто для названия ибо это тест версия.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
table class="row"> tr class="row"> td class="col-md-3 col-sm-3 col-xs-2" style="background-color:#e6e6e6;vertical-align:top;"> ul class="listOfLinksToArticles col-md-12" style="list-style:none;padding-top:15px;background-color:#e6e6e6;"> li class="articleCategory">Введение/li> li class="linkToArticle"> a href="/Home/Articles?id=5">testtesttesttesttesttesttestesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest/a> /li> li class="linkToArticle"> a href="/Home/Articles?id=5">qweqeq/a> /li> li class="linkToArticle"> a href="/Home/Articles?id=5">qweqeq/a> /li> li class="linkToArticle"> a href="/Home/Articles?id=5">qweqeq/a> /li> li class="linkToArticle"> a href="/Home/Articles?id=5">qweqeq/a> /li> /ul> /td> td class="col-md-9 col-sm-9 col-xs-10" style="background-color:#efeeee;padding-top:25px;"> div class="articleContent col-md-12"> @Html.Raw(Model.content) /div> div class="col-md-12 text-center"> previous content next /div> div class="articleComments col-md-12"> Comments /div> /td> /tr> /table>
TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid black; /* Параметры рамки */ }
Если не совсем понятно, то я объясню подробнее, если содержимое ячейки не такое большое т.е. не доходит до её границы, то тогда всё вроде бы норм, но вот когда превышает, то оно растягивается очень сильно (в зависимости от превышения), так вот мне необходимо чтобы всегда был фиксированный размер и ничего никуда не растягивалось при увеличении контента.
Хелпаните дураку пж.