web-dev-qa-db-ja.com

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

Bootstrapを使用している間、私はちょっとCSSの問題で立ち往生しています。私はAngularJSをAngular UI.bootstrapと共に使用しています（これは問題の一部かもしれません）。

私はテーブルにデータを表示する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;
}

だからここで私が欲しいのは内側の境界線だけです。

htmlcsstwitter-bootstrap
166
Romain

罫線のスタイルは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

245
Brett Henderson

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;
}
321
Davide Pastore

他のものと似ていますが、より具体的には：

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

.tableクラスを<table>タグに追加しないでください。 tables のBootstrapドキュメントから：

基本的なスタイル - ライトパディングおよび 水平方向の区切り線のみ - 基本クラス.tableを任意の<table>に追加します。それは非常に冗長に思えるかもしれませんが、カレンダーや日付ピッカーのような他のプラグインのためのテーブルの広範な使用を考えると、私たちは私たちのカスタムテーブルスタイルを分離することを選びました。

17
Martin Bean

Bootstrap v4.1以降、あなたのテーブルにtable-borderlessを追加することができます。 公式ドキュメント ：

<table class='table table-borderless'>
6
Max

私のCSSでは：

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

私の指令では：

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

私はtd要素に「ボーダレス」を付けませんでした。

テストしてうまくいった！すべてのボーダーとパディングは完全に取り除かれています。

5
Daniel C. Deng

Davide Pastoreのように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'>を使用すると、クラス内の特定のテーブルだけが境界になり、ツリーのどのテーブルも境界にはなりません。

4
shellco

これを試して：

<table class='borderless'>

CSS

.borderless {
 border:none;
}

注：あなたのcssコードがあなたの.borderlessテーブル（おそらく存在しなかった）内のテーブルをターゲットにしていたので、あなたが以前やっていたことはうまくいかなかった。

3
Danield

私はこれが古いスレッドであり、あなたが答えを選んだことを知っています、しかし私はそれが現在見ている他の誰かに関連しているので私はこれをポストすると思いました。

新しいCSSルールを作成する理由はありません。現在のルールを元に戻すだけで、枠が消えます。

 
 .table> tbody> tr> th、
 .table> tbody> tr> td {
 border-top：0; 
}

今後は、どんなスタイルでも

 .table

境界線を表示しません。

3
Don Escobar

Bootstrap 4のborder-クラスを使う

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

または

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

最後に行った変更でクラス入力を終了してください。

2
Steffo Dimfelt

私はここでは試合に遅刻していますが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>
1
fnostro

hiddenの代わりにnoneを使用してください。

.hide-bottom {
    border-bottom-style: hidden;
}
1
dev pro

ほとんどの例は、具体的すぎたり肥大したりしているようです。

これはBootstrap 4.0.0（4.1には.table-borderlessが含まれていますが、それでもまだアルファが含まれています）を使用して私が解決したソリューションです...

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

多くの提案された解決策と似ていますが、最小限のバイト？

注：BS4.1の参照を表示していて、なぜ.table-borderlessが4.0のソースで機能していなかったのか理解できなかったため、ここに入りました（例：operator error、duh）。

0
Mavelo