HTML/CSS

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

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

1

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

<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;
}
2

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

Для наложения на рамку таблицы нужно указать отрицательные значения toprightbottomleft

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

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

Тут нужно добавить класс 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;
}
4

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

Класс 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;
}
18 января 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.