@alexbuki

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

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

Код моей верстки:
<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;
}


Мой вариант:
5c35f46e63262978911410.jpeg

Как сделать боковые границы в шапке неполными?
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
Splinter_1g
@Splinter_1g
.NET Core, VueJS
table,thead, tr, th {
  height: 100% !important;
}

th {
  vertical-align: top !important;
  p {
    height: 100%;
    padding-left: 10px;
    border-left: 2px solid #ddd;   
    margin: 0px;
  }
}

На Вашем примере: https://jsfiddle.net/q3v6t1no/1/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@midnight_yola
весь текст в шапке оберни в отдельный тэг напр thead>tr>td>span.your_class и текст пункта
и потом добавляй бордер к .your_class
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Spartan.by Минск
от 400 до 700 usd.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.