В статье описано, как установить полосу прокрутки вtbodyНа этикетке, да и на таблице в целом полоса прокрутки не установлена; кроме того, некоторыеtableнепопулярная поза.
How to set tbody height with overflow scroll
Чтобы дать tbody лишнюю полосу прокрутки, вам нужно только установить фиксированное значение для tbodyheight,так же какoverflow:autoЭто выходит за рамки добавления полос прокрутки. Но таблица присущаdisplayсвойство делает настройку для thead и tbodyheightБесполезный.
Первое, что нужно сделать здесь, это изменитьdisplayАтрибуты:
table,thead,tbody{
display:block
}
можно установить позжеheight, но после настройкиheightВ это время стиль таблицы искажается, что проявляется в виде проблемной демонстрационной таблицы 2. Для сохранения стиля в нормальном виде необходимо:
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
display:tableсделатьtrЭтикетка ведет себя какtable,table-layout:fixedи установить ширинуwidth:100%представляет собой набор комбо-ударов, таких что ширина первой строки этой «таблицы» равна100%, а ширина каждого столбца одинакова, все последующие строки выравниваются в соответствии с первой строкой, а при превышении содержимого появляется полоса прокрутки.
Если вы хотите сделатьtheadа такжеtbodyШирина остается прежней, требуется дополнительное удалениеtheadШирина дополнительной полосы прокрутки, например:
thead {
width: calc( 100% - 1em )
}
После этого ширина столбца каждого столбца одинакова. Проблема в том, что если метка используется заранееcolgroupУстановка разной ширины столбцов здесь теряется.
Не лучшее решение — начинать сначалаth,tdЗадайте ширину, например:
th:nth-child(1),
td:nth-child(1) {
width: 5%;
}
th:nth-child(2),
td:nth-child(2) {
width: 6.7%;
}
Кстати, добавь проtableнепопулярная поза
Когда это происходит?tableШерстяная ткань?
Кривые слова говорят так: таблицы для табличных данных.Что это значит? Как таблица умножения...
Не используйте егоtableПерейти к макету! Поскольку теги HTML являются семантическими, избыточные семантические теги не подходят для программ чтения с экрана.
thead,tbody,tfoot
Только один заголовок рекомендует использовать эти три элемента для переноса строк (trэлемент), семантически заданный.
здесьtfootЭлементы являются специальными и рекомендуемыми в htmltfootразмещенtheadПозже,tbodyДо. (Но результат рендеринга все равно в конце) Причина:
this is an accessibility concern, as the footer may contain information necessary to understand the table, it should be before the data in the source order.
td,th
cells
вthне ограничиваетсяtheadиспользуется в , он просто представляет информацию заголовка
В случае двойных осей пропустите и не используйтеtheadсейчас,Двойная ось
клетки сливаются
rowspanпредставляет собой многострочное слияние,colspanпредставляет собой слияние нескольких столбцов
Заголовки таблиц чаще всего организуют:demo
основной стиль
Используйте цвета, линии, чтобы различать различные части таблицы.
По умолчанию ячейки таблицы располагаются на расстоянии 2 пикселей друг от друга (через таблицы стилей пользовательского агента):
table {
border-collapse: separate;
border-spacing: 2px;
}
Вы можете установить размер этого значения:
table {
border-spacing: 0.5rem;
}
Чаще удалить это значение:
table {
border-collapse: collapse;
}
tableширина
Элемент table немного похож наdisplay:block, потому что элемент таблицы будет отображаться на новой строке. Но его ширина... она настолько широка, насколько это необходимо, и ее нельзя установить.
Ячейка не переносится, и текст переносится по умолчанию:demo