Рамка у отдельных ячеек таблицы

18.01.2019

14509

Метод добавления рамки к отдельным ячейкам, столбцам и строкам таблиц. К ячейке таблицы добавляются position: relative и блок :after с абсолютным позиционированием, который растягивается на всю ширину и высоту. Далее к нему применяются нужные CSS стили.

Рамка у ячейки

<table class="table">
	<tr>
		<td>Safari</td>
		<td>1,089</td>
		<td class="active">2.63%</td>
		<td>904</td>
		<td>00:59</td>
	</tr>
</table>

HTML

.table th, .table td {
	position: relative;
}
.active:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px; 
	bottom: 0px;    
	left: 0px;
	border: 3px solid orange;
}

CSS

Наложение на текущую рамку таблицы

Для наложения на рамку таблицы нужно указать отрицательные значения top, right, bottom, left.

.table th, .table td {
	position: relative;
}
.active:after {
	content: '';
	position: absolute;
	top: -1px;
	right: -1px;   
	bottom: -1px;    
	left: -1px;
	border: 3px solid orange;
}

CSS

Рамка у столбца

Тут нужно добавить класс active у <td> в каждой строке <tr>.

<table class="table">
	<thead>
		<tr>
			<th>Browser</th>
			<th>Sessions</th>
			<th class="active">Percentage</th>
			<th>New Users</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Chrome</td>
			<td>9,562</td>
			<td class="active">68.81%</td>
			<td>7,895</td>
		</tr>
		<tr>
			<td>Firefox</td>
			<td>2,403</td>
			<td class="active">17.29%</td>
			<td>2,046</td>
		</tr>
	</tbody>
</table>

HTML

.table th, .table td {
	position: relative;
}
.table .active:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;    
	bottom: 0px;    
	left: 0px;
	height: 105%;
	border-left: 3px solid orange;
	border-right: 3px solid orange;
}

/* Рамка сверху у первой ячейки */
.table thead .active:after {
	border-top: 3px solid orange;
}

/* Рамка снизу у последней ячейки */
.table tbody tr:last-child .active:after {
	border-bottom: 3px solid orange;
	height: auto;
}

CSS

Рамка у строки

Класс active указывается только у <tr>.

<table class="table">
	<tr class="active">
		<td>Safari</td>
		<td>1,089</td>
		<td>2.63%</td>
		<td>904</td>
		<td>00:59</td>
	</tr>
</table>

HTML

.table th, .table td {
	border: 1px solid #888;
	position: relative;
}
.table .active td:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;    
	bottom: 0px;    
	left: 0px;
	width: 105%;
	border-top: 3px solid orange;
	border-bottom: 3px solid orange;
}

/* Рамка слева у первой ячейки */
.table .active td:first-child:after {
	border-left: 3px solid orange;
}

/* Рамка справа у последний ячейки */
.table .active td:last-child:after {
	border-right: 3px solid orange;
	width: auto;
}

CSS