CSS display table

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице <table>, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

display: table; <table>
display: inline-table; <table> но с display: inline-block
display: table-caption; <caption>
display: table-column-group; <colgroup>
display: table-column; <col>
display: table-header-group; <thead>
display: table-row-group; <tbody>
display: table-footer-group; <tfoot>
display: table-row; <tr>
display: table-cell; <td> или <th>
1

Таблица - сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Grid Layout, но можно сделать и на display: table.

Рассмотрим пример – сетка 3x2 в три колонки сделанная таблицей:

<table class="grid">
	<tr>
		<td>
			<div class="item">Блок №1</div>
		</td>
		<td>
			<div class="item">Блок №2</div>
		</td>
		<td>
			<div class="item">Блок №3</div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="item">Блок №4</div>
		</td>
		<td>
			<div class="item">Блок №5</div>
		</td>
		<td>
			<div class="item">Блок №6</div>
		</td>
	</tr>
</table>
HTML
.grid {
	width: 100%;
	border: none;
	border-collapse: separate;
	border-spacing: 5px;
}
.grid td {
	width: 33.3%;
	vertical-align: top;
	padding: 0;
}
CSS

На элементах <div> выглядит точно также.

<div class="grid">
	<div class="grid-tr">
		<div class="grid-td">
			<div class="item">Блок №1</div>
		</div>
		<div class="grid-td">
			<div class="item">Блок №2</div>
		</div>
		<div class="grid-td">
			<div class="item">Блок №3</div>
		</div>
	</div>
	<div class="grid-tr">
		<div class="grid-td">
			<div class="item">Блок №4</div>
		</div>
		<div class="grid-td">
			<div class="item">Блок №5</div>
		</div>
		<div class="grid-td">
			<div class="item">Блок №6</div>
		</div>
	</div>
</div>
HTML
.grid {
	display: table;	
	width: 100%;
	border: none;
	border-collapse: separate;
	border-spacing: 5px;
}
.grid-tr {
	 display: table-row;
}
.grid-td {
	display: table-cell;	
	width: 33.3%;
	vertical-align: top;
	padding: 0;
}
.grid-tr {
	 display: table-row;
}
.grid-td {
	display: table-cell;	
	width: 33.3%;
	vertical-align: top;
	padding: 0;
}
CSS
2

Замена всех тегов таблицы

<table class="table">
	<caption>Заголовок таблицы</caption>
	<colgroup>
		<col width="10%">
		<col width="30%">
		<col width="30%">
		<col width="30%">
	</colgroup>
	<thead>    
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Ник</th>
		</tr>
	</thead>
	<tbody> 
		<tr>
			<th>1</div>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th>2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th>3</th>
			<td>Larry</td>
			<td>Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody> 
	<tfoot>
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Ник</th>
		</tr>
	</tfoot>
</table>
HTML
.table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #555;
}
.table caption {
	padding: 10px;
	color: #333;
	font-size: 16px;
	text-align: center;
}
.table th {
	padding: 10px;
	border: 1px solid #555;
	font-weight: bold;
	text-align: left;
}
.table td {
	padding: 10px;
	border: 1px solid #555;
}
.table thead th, .table thead td {
	background: #f9f9f9;
}
.table tbody th, .table tbody td {
	background: #fff;
}
.table tfoot th, .table tfoot td {
	background: #f4f6ff;
}
CSS

На тегах div

Тут есть одна особенность – у таблицы ширина 100% к ней прибавляются рамки, поэтому таблица будет выходить за приделы родителя, box-sizing: border-box; это исправит.

<div class="table">
	<div class="table-caption">Заголовок таблицы</div>
	<div class="table-colgroup">
		<div class="table-col" width="10%"></div>
		<div class="table-col" width="30%"></div>
		<div class="table-col" width="30%"></div>
		<div class="table-col" width="30%"></div>
	</div>
	<div class="table-thead">    
		<div class="table-tr">
			<div class="table-th">#</div>
			<div class="table-th">Имя</div>
			<div class="table-th">Фамилия</div>
			<div class="table-th">Ник</div>
		</div>
	</div>
	<div class="table-tbody"> 
		<div class="table-tr">
			<div class="table-th">1</div>
			<div class="table-td">Mark</div>
			<div class="table-td">Otto</div>
			<div class="table-td">@mdo</div>
		</div>
		<div class="table-tr">
			<div class="table-th">2</div>
			<div class="table-td">Jacob</div>
			<div class="table-td">Thornton</div>
			<div class="table-td">@fat</div>
		</div>
		<div class="table-tr">
			<div class="table-th">3</div>
			<div class="table-td">Larry</div>
			<div class="table-td">Bird</div>
			<div class="table-td">@twitter</div>
		</div>
	</div> 
	<div class="table-tfoot">
		<div class="table-tr">
			<div class="table-th">#</div>
			<div class="table-th">Имя</div>
			<div class="table-th">Фамилия</div>
			<div class="table-th">Ник</div>
		</div>
	</div>
</div>
HTML
.table {
	display: table;
	width: 100%;
	box-sizing: border-box;
	border-collapse: collapse;
	border: 1px solid #555;
	empty-cells: show; 
}
.table-caption {
	display: table-caption;
	padding: 10px;
	color: #333;
	font-size: 16px;
	text-align: center;
}
.table-colgroup {
	display: table-column-group;
}
.table-col {
	display: table-column;
}
.table-thead {
	display: table-header-group;
}
.table-tbody {
	display: table-row-group;
}
.table-tfoot {
	display: table-footer-group;
}
.table-tr {
	display: table-row;
}
.table-th {
	display: table-cell;
	padding: 10px;
	border: 1px solid #555;
	font-weight: bold;
	text-align: left;
}
.table-td {
	display: table-cell;
	padding: 10px;
	border: 1px solid #555;
}
.table-thead .table-th, .table-thead .table-td {
	background: #f9f9f9;
}
.table-tbody .table-th, .table-tbody .table-td {
	background: #fff;
}
.table-tfoot .table-th, .table-tfoot .table-td {
	background: #f4f6ff;
}
CSS
13.08.2019 95

Поделится

Другие публикации

Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
Сборник горизонтальных линий с тегом hr разных видов и стилей.
Представленные способы помогут сделать алфавитный список (указатель) разбитый на колонки, для вывода например станций...
Часто приходится делать меню на всю ширину какого-либо блока или окна. При этом оно должно: растягиваться на всю ширину...
Сделать информативнее страницу поиска – это выделить искомую фразу в результатах: Выделение текста можно...