Я использую Bootstrap, у меня есть проблема с CSS. Я также использую Angular JS с Angular UI.bootstrap(который может быть частью проблемы).
Я создаю веб-сайт, который отображает данные в таблице. Когда-то, данные содержат объект, который я должен отображать в таблицах. Поэтому я хочу поместить таблицы без полей в обычную таблицу, сохраняя внутри разделительных линий для таблиц без полей.
Но кажется, что даже если я специально говорю, чтобы не показывать границы на таблице, это принудительно:
HTML:
<table class='table borderless'>
CSS
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
Итак, здесь я хочу только внутренние границы.
Укладка границы устанавливается в элементах td
.
HTML:
<table class='table borderless'>
CSS
.borderless td, .borderless th {
border: none;
}
.borderless th
, так как стиль Bootstrap также применяется к <th>
.
Использование Bootstrap 3.2.0 У меня была проблема с решением Бретта Хендерсона (границы всегда были там), поэтому я улучшил его:
HTML
<table class="table table-borderless">
CSS
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
border: none;
}
th
-элементном в теле: .borderless tbody tr th
- .borderless tbody tr th
(используется в примерах )
аналогично остальному, но более конкретному:
table.borderless td,table.borderless th{
border: none !important;
}
Не добавляйте класс .table
к тегу <table>
. Из документов Bootstrap на tables:
Для базового стиля прокладки и только горизонтальные разделители -add базовый класс
.table
для любого<table>
. Это может показаться супер избыточным, но, учитывая широкое использование таблиц для других плагинов, таких как календари и сборщики дат, мы решили изолировать наши пользовательские стили таблиц.
Я расширил стили таблицы Bootstrap, как это сделал Давиде Пасторе, но с этим методом стили применяются ко всем дочерним таблицам, и они не применяются к нижнему колонтитулу.
Лучшее решение будет имитировать основные стили таблицы Bootstrap, но с вашим новым классом:
.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
border: none;
}
Затем, когда вы используете <table class='table table-borderless'>
, только конкретная таблица с классом будет ограничена, а не любая таблица в дереве.
В моем CSS:
.borderless tr td {
border: none !important;
padding: 0px !important;
}
В моей директиве:
<table class='table borderless'>
<tr class='borderless' ....>
Я не помещал 'borderless' для элемента td.
Протестировано, и это сработало! Все границы и прокладки полностью удалены.
Попробуйте следующее:
<table class='borderless'>
.borderless {
border:none;
}
Примечание. То, что вы делали раньше, не работает, потому что ваш код css был нацелен на таблицу в вашей таблице без полей (которая, вероятно, не существовала)
Используйте hidden
вместо none
:
.hide-bottom {
border-bottom-style: hidden;
}
Я опаздываю к игре здесь, но FWIW: добавление .table-bordered
в .table
просто обертывает таблицу рамкой, хотя и добавляет полную границу для каждой ячейки.
Но удаление .table-bordered
все еще оставляет строки правил. Это семантическая проблема, но в соответствии с номенклатурой BS3 + я использовал этот набор переопределений:
.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
border-top: 0 none transparent;
border-bottom: 0 none transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-5">
.table
<table class="table">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
<div class="col-xs-5 col-xs-offset-1">
<table class="table table-bordered">
.table .table-bordered
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<table class="table table-unruled">
.table .table-unruled
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
<div class="col-xs-5 col-xs-offset-1">
<table class="table table-bordered table-unruled">
.table .table-bordered .table-unruled
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
<tfoot>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Я знаю, что это старый поток, и вы выбрали ответ, но я думал, что опубликую его, поскольку он релевантен для всех, кто в настоящее время ищет.
Нет причин создавать новые правила CSS, просто отменить текущие правила и границы исчезнут.
.table>tbody>tr>th, .table>tbody>tr>td { border-top: 0; }
вперёд, что-то в стиле
.table
не будет отображаться границ.
Это работало для меня.
<td style="border-top: none;">;
Ключ вам нужно добавить border-top к <td>