212

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;
}

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

4

17 に答える 17

355

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;
}
于 2014-07-18T17:26:42.010 に答える
328

境界線のスタイルはtd要素に設定されています。

html:

<table class='table borderless'>

CSS:

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

更新:.table-borderless Bootstrap 4.1 以降、境界線を削除するために使用できます。

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

于 2013-08-06T09:18:12.247 に答える
6

私のCSSで：

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

私の指令では：

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

td要素に「ボーダーレス」を入れませんでした。

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

于 2015-01-17T00:32:58.087 に答える
5

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'>、クラスで特定のテーブルのみを使用すると、ツリー内のテーブルではなく、境界が付けられます。

于 2016-11-04T04:52:54.827 に答える
4

これを試して：

<table class='borderless'>

CSS

.borderless {
 border:none;
}

注: css コードが .borderless テーブル内のテーブルを対象としていたため (これはおそらく存在しませんでした)、以前に行っていたことが機能しませんでした。

于 2013-08-06T09:09:00.060 に答える
2

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

これは、Bootstrap 4.0.0 (4.1 には含まれています.table-borderlessが、まだアルファ版) を使用した私の縮小されたソリューションです...

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

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

注: BS4.1 の参照を表示し.table-borderlessていて、4.0 のソースで動作しない理由がわからなかったため、ここにたどり着きました (例: オペレーター エラー、当然)

于 2018-09-29T15:55:09.753 に答える
2

これは私のために働いた。

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

重要なのは、ボーダートップを追加する必要があることです<td>

于 2014-03-25T20:48:23.147 に答える
0

Bootstrap は scss をサポートしており、特別な変数があります。この場合、メインの variables.scss ファイルに追加できます。

$table-border-width: 0;

詳細はこちらhttps://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/scss/_variables.scss#L347-L380

于 2021-01-26T21:04:28.417 に答える