2016-04-14 2 views
0

Я хочу использовать таблицу загрузок 3 с границами, например, с помощью class="table table-bordered", так что у меня будут границы между ячейками, но Я не хочу никаких границ на внешней стороне таблицы.bootstrap3 с таблицей без границ

Я пробовал следующее, и, похоже, он хорошо работает для сторон, но я не могу придумать хороший способ обработки потенциальных верхних и нижних границ, учитывая, что thead и tfoot являются дополнительными элементами. Я надеялся сделать что-то надежное, что будет учитывать эти сценарии, максимизируя потенциал возобновления.

.table-bordered.no-outside-borders { 
    border: none; 
} 

.table-bordered.no-outside-borders>thead>tr>td:first-child, 
.table-bordered.no-outside-borders>thead>tr>th:first-child, 
.table-bordered.no-outside-borders>tfoot>tr>td:first-child, 
.table-bordered.no-outside-borders>tfoot>tr>td:first-child, 
.table-bordered.no-outside-borders>tbody>tr>td:first-child, 
.table-bordered.no-outside-borders>tbody>tr>th:first-child { 
    border-left: none; 
} 

.table-bordered.no-outside-borders>thead>tr>td:last-child, 
.table-bordered.no-outside-borders>thead>tr>th:last-child, 
.table-bordered.no-outside-borders>tfoot>tr>td:last-child, 
.table-bordered.no-outside-borders>tfoot>tr>th:last-child, 
.table-bordered.no-outside-borders>tbody>tr>td:last-child, 
.table-bordered.no-outside-borders>tbody>tr>th:last-child { 
    border-right: none; 
} 

Есть ли здесь хорошее решение css?

ответ

0

вчера у меня была такая же проблема, код CSS я использовал для этого было:

.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th { 
    border: none; 
    max-height: 200px; 
    font-size: 20px; 

    border-right: 1px solid gray; 
    border-collapse: collapse; 
} 
.table.table-borderless { 


    border-right: 1px solid gray; 
    border-collapse: collapse; 
    max-height: 200px; 
    font-size: 20px; 
} 
Смежные вопросы