Таблица Bootstrap без полосы / границ
Я застрял с проблемой CSS при использовании Bootstrap. Я также использую Angular JS с угловым 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;
}
Итак, здесь я хочу только внутренние границы.
14 ответов
стиль границы установлен на td
элементы.
HTML-код:
<table class='table borderless'>
css:
.borderless td, .borderless th {
border: none;
}
используя 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;
}
аналогично остальным, но более конкретно:
table.borderless td,table.borderless th{
border: none !important;
}
не добавлять .table
класс <table>
тег. Из документов Bootstrap на таблицы:
для основного стиля - легкая обивка и только горизонтальные разделители-добавить базовый класс
.table
любой<table>
. Это может показаться излишним, но учитывая широкое использование таблиц для других плагинов, таких как календари и сборщики дат, мы решили изолировать наши пользовательские стили таблиц.
в моем CSS:
.borderless tr td {
border: none !important;
padding: 0px !important;
}
в моей директивы:
<table class='table borderless'>
<tr class='borderless' ....>
Я не ставил "borderless" для элемента td.
проверен и работает! Все бордюры и прокладки полностью сорваны.
начиная с Bootstrap v4.1 Вы можете добавить table-borderless
к вашему столу, вижу официальная документация:
<table class='table table-borderless'>
попробуйте это:
<table class='borderless'>
в CSS
.borderless {
border:none;
}
Примечание: то, что вы делали раньше, не работало, потому что ваш код css был нацелен на таблицу внутри вашего .таблица без границ (которой, вероятно, не существовало)
я расширил стили таблицы начальной загрузки, как это сделал Davide Pastore, но с помощью этого метода стили также применяются ко всем дочерним таблицам, и они не применяются к нижнему колонтитулу.
лучшим решением было бы имитировать стили таблицы начальной загрузки ядра, но с вашим новым классом:
.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, просто отмените текущие правила, и границы исчезнут.
.table>tbody>tr>th, .table>tbody>tr>td { border-top: 0; }
вперед, что-нибудь в стиле
.table
покажет никаких границ.
Я опаздываю на игру здесь, но 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>
использовать border-
класс от Boostrap 4
<td class="border-0"></td>
или
<table class='table border-0'></table>
обязательно завершите ввод класса последним изменением, которое вы хотите сделать.
большинство примеров кажутся слишком конкретными и / или раздутыми.
вот мое обрезанное решение с помощью Bootstrap 4.0.0 (4.1 включает .table-borderless
но все-таки Альфа)...
.table-borderless th{border:0;}
.table-borderless td{border:0;}
подобно многим предложенным решениям, но минимальные байты
Примечание: оказался здесь, потому что я просматривал BS4.1 ссылки и не могли понять, почему .table-borderless
не работал с моими источниками 4.0 (например: ошибка оператора, duh)