Таблиця завантаження без смуг / меж

Я якось застряг із проблемою 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> tr> й,
    .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>

отримати посилання за цим посиланням