Загрузочный стол без полосы / бордюров

Я вроде застрял с проблемой CSS при использовании Bootstrap. Я также использую 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;
}

Обновление: Начиная с Bootstrap 4.1 вы можете использовать .table-borderlessдля удаления границы.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

При использовании 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>. Это может показаться излишним, но, учитывая широкое использование таблиц для других плагинов, таких как календари и средства выбора дат, мы решили изолировать наши пользовательские стили таблиц.

Начиная с Bootstrap v4.1 вы можете добавить table-borderlessк своей таблице, смотрите официальную документацию :

<table class='table table-borderless'>

В моем CSS:

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

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

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

Я не поставил «без полей» для элемента td.

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

Я расширил стили таблиц Bootstrap, как это сделал Davide Pastore, но с помощью этого метода стили также применяются ко всем дочерним таблицам и не применяются к нижнему колонтитулу.

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

Попробуй это:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

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

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

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

    .table> TBODY> тр> й,
    .table> tbody> tr> td {
        граница вершины: 0;
    }

идти вперед, что-нибудь в стиле

    .стол

не покажет границ.

Используйте border-класс из Boostrap 4

<td class="border-0"></td>

или

<table class='table border-0'></table>

Не забудьте завершить ввод класса последним изменением, которое вы хотите сделать.

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

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

Ключ в том, что вам нужно добавить <td>

Я опоздал на игру здесь , но 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>

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

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

Большинство примеров кажутся слишком конкретными и / или раздутыми.

Вот мое урезанное решение с использованием Bootstrap 4.0.0 (4.1 включает в себя, .table-borderlessно все еще альфа) ...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

Аналогично многим предложенным решениям, но с минимальными байтами 😉

Примечание: Закончилось здесь, потому что я просматривал ссылки на BS4.1 и не мог понять, почему .table-borderlessне работал с моими источниками 4.0 (например: ошибка оператора, дух)

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

интервал границы: 0! важно;

Установите загрузчик с помощью ссылки npm или cdn

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

получить ссылку с этой ссылкой