Bootstrap　テーブル(表)の罫線を消したい

初めてBootstrapを勉強しています。
CSSも知識は乏しいです。

表題の通りですがテーブルの罫線を消したいです。
※Bootstrapはあまり関係ないかもしれませんが・・・。

検索しても
ストライプにしたり、
逆に色を付ける情報ばかりです。

以下を試してみましたが違うようで消えません。

css
1.table{border-style:none;}
2

css
1.table td{border-style:none;}
2
3

html
1<table class="table">
2
3					<thead>
4						<tr>
5							<th>Relaxation</th>
6							<th></th>
7						</tr>
8					</thead>
9					<tbody>
10						<tr>
11							<td></td>
12							<td>フェイシャルエステ \5,000</td>
13						</tr>
14					</tbody>
15</table>

宜しくお願い致します。

行動規範の内容に同意します

回答2件

CSS
1.table th,
2.table td {
3  border:none;
4}

上記のCSSをbootstrapの標準CSSより後で読み込ませてみてください。
標準tableスタイルであればborder線を消せると思います。
元になっているのが標準tableスタイル（.table)ではない場合は、
他にも線が設定されている可能性がありますので、
該当のセレクタを調べて上書きする必要があります。

Bootstrapのデフォルトスタイルを打ち消したい場合は、
まずChromeのデベロッパーツールなどで実際にどの要素にどんなセレクタで
CSSが適用されているのか確認し、
それと同じセレクタもしくはそれより詳細度の高いセレクタで内容を上書きするのが
基本的な対処方法となります。

また、その際Bootstrap本体のCSSを直接いじってしまうのはよろしくないので、
オリジナルデザイン用のCSSを別途用意し、BootstrapのCSSより後でそれを読みこませるように
してください。

投稿2016/05/06 05:19

aKusano

総合スコア3763

ベストアンサー

CSS
1.table>tbody>tr>td,
2.table>tbody>tr>th,
3.table>thead>tr>th {
4    border-style: none;
5}
6```か
7```CSS
8table, th, td {border-style:none!important;}
9```とか。
10
11**追記：**
12
13`!important` の位置がおかしかったので修正しました。
14また、私が書いておきながら `!important` は使わないで済むなら使わないように設計するのがよいです。「詳細度」で上書きするのが良いです。
15
16【エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita】
17[http://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4](http://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4)
18
19【詳細度 - CSS | MDN】
20[https://developer.mozilla.org/ja/docs/Web/CSS/Specificity](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)