Как сделать красивые границы в шапке таблицы?

Question

[Александр Буки]

Делаю верстку таблицы. Макет на картинке.
Делаю на бутстрапе.
Подскажите как сделать границы ячеек как на картинке


Код моей верстки:

<table class=" productsTable table table-sm  table-hover table-responsive">
							<!--Table head-->
                            <thead class="mdb-color darken-2">
                                <tr class="text-white">
                                    <th></th>
                                    <th class="borderedCell">Государственный сектор</th>
                                    <th>Транспорт</th>
                                    <th>Нефть и газ</th>
                                    <th>Промышленность</th>
                                    <th>Телекоммуникации</th>
                                    <th>Финансовый сектор</th>
                                    <th>Торговые организации</th>
                                </tr>
                            </thead>
                            <!--Table head-->
                                                    <!--Table body-->
                            <tbody>
                                <tr><td><h5><strong>Управление информацией</strong></h5></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                <tr class="table-c3"><td><a  href="#yyy"><strong>DOCS360: Документы Компании.</strong></a></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                    <td><i class="fa fa-bolt" aria-hidden="true"></i></td>
                                </tr>
                                    <tr class="table-c3"><td><strong>ES360: Информация Компании.</strong></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr class="table-c3"><td><strong>GEO360: Геоинформационная система.</strong></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr><td><h5><strong>Управление процессами</strong></h5></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr class="table-c4"><td><strong>BPM360: Управление бизнес-процессами</strong>.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr class="table-c4"><td><strong>EAM360: Управление активами.</strong></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr class="table-c4"><td><strong>CRM360: Управление взаимоотношениями с заказчиками.</strong></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr class="table-c4"><td><strong>SC360: Ситуационный центр.</strong></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                    <tr class="table-c4"><td><strong>PC360: Управление закупками.</strong></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                        </tbody>			
						</table>

.productsTable thead th {
    vertical-align: middle;
}

.productsTable tbody tr:hover {
    cursor: pointer;
}
.table-c3 {
    background: rgba(106, 200, 222, 0.27);
}

.table-c4 {
    background: rgba(156, 165, 80, 0.26);
}
.borderedCell{
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: white;
}

Мой вариант:


Как сделать боковые границы в шапке неполными?

Comments

[Сергей delphinpro]

Завернуть содержимое заголовочных ячеек в span, которому и дать левый бордер.

[Александр Буки]

Сергей delphinpro, почти
текст поместил в див, теперь не пойму как сделать высоту дива по высоте всего ряда

[Евгений]

сделай th position: relative, и через before добавь бордеры
P.S: ток в firefox проверь, там помню relative на th и td не работало

[Сергей delphinpro]

Евгений, это было давно. в последних версиях проблем нет. как минимум в десяти последних.

[Александр Буки]

Евгений, спасибо, только с before не совсем понял.
На классе псевдоэлемент before сделать?

[Евгений]

alexbuki, th:before

Answer 1

[midnight_yola]

весь текст в шапке оберни в отдельный тэг напр thead>tr>td>span.your_class и текст пункта
и потом добавляй бордер к .your_class