ストライプ/ボーダーなしのブートストラップテーブル

Bootstrapの使用中にCSSの問題が発生します。私はまた、Angular UI.bootstrapでAngular JSを使用しています（これは問題の一部である可能性があります）。

テーブルにデータを表示するWebサイトを作成しています。データがテーブルに表示する必要があるオブジェクトを含む場合があります。ボーダーレステーブルの分割線の内側を維持しながら、通常のテーブル内にボーダーレステーブルを配置したいと思います。

しかし、私が具体的にテーブルに境界線を表示しないように言っても、それは強制されているようです：

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を使用すると、Brett Hendersonソリューションに問題が発生しました（境界線は常にそこにありました）。

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>タグに追加しないでください。テーブルのブートストラップのドキュメントから：

基本的なスタイリング（軽いパディングと水平方向の仕切りのみ）の場合は、基本クラス.tableをanyに追加します<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要素に「ボーダーレス」を配置しませんでした。

テスト済みで動作しました！すべてのボーダーとパディングは完全に取り除かれます。

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> th、
    .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;}

多くの提案されたソリューションに似ていますが、最小バイトbytes

注：BS4.1の参照を表示.table-borderlessしていて、4.0のソースが機能しない理由を理解できなかったため、ここで終了しました（例：オペレーターのエラー、duh）💩

場合によっては、次のように、テーブルクラスでborder-spacingも使用する必要があります。

border-spacing：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>

このリンクで参照を取得します