Метод добавления рамки к отдельным ячейкам, столбцам и строкам таблиц. К ячейке таблицы добавляются 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>
.table th, .table td {
position: relative;
}
.active:after {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
border: 3px solid orange;
}
Для наложения на рамку таблицы нужно указать отрицательные значения 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;
}
Тут нужно добавить класс 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>
.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;
}
Класс 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>
.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;
}