Загрузочный стол без полос/границ

Я использую 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;
}

Итак, здесь я хочу только внутренние границы.

ОТВЕТЫ

Ответ 1

Укладка границы устанавливается в элементах td.

HTML:

<table class='table borderless'>

CSS

.borderless td, .borderless th {
    border: none;
}

Ответ 2

Использование 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;
}

Ответ 3

аналогично остальному, но более конкретному:

    table.borderless td,table.borderless th{
     border: none !important;
}

Ответ 4

Не добавляйте класс .table к тегу <table>. Из документов Bootstrap на tables:

Для базового стиля прокладки и только горизонтальные разделители -add базовый класс .table для любого <table>. Это может показаться супер избыточным, но, учитывая широкое использование таблиц для других плагинов, таких как календари и сборщики дат, мы решили изолировать наши пользовательские стили таблиц.

Ответ 5

В моем CSS:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

В моей директиве:

<table class='table borderless'>
    <tr class='borderless' ....>

Я не помещал 'borderless' для элемента td.

Протестировано, и это сработало! Все границы и прокладки полностью удалены.

Ответ 6

Я расширил стили таблицы 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'>, только конкретная таблица с классом будет ограничена, а не любая таблица в дереве.

Ответ 7

Попробуйте следующее:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Примечание. То, что вы делали раньше, не работает, потому что ваш код css был нацелен на таблицу в вашей таблице без полей (которая, вероятно, не существовала)

Ответ 8

Это работало для меня.

<td style="border-top: none;">;

Ключ вам нужно добавить border-top к <td>

Ответ 9

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

Нет причин создавать новые правила CSS, просто отменить текущие правила и границы исчезнут.

    .table>tbody>tr>th,
    .table>tbody>tr>td {
        border-top: 0;
    }

вперёд, что-то в стиле

    .table

не будет отображаться границ.

Ответ 10

Я опаздываю к игре здесь, но 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>

Ответ 11

Используйте hidden вместо none:

.hide-bottom {
    border-bottom-style: hidden;
}