Bootstrapを使っていて、CSSの問題でちょっと困っています。また、Angular UI.bootstrapでAngular JSを使用しています(これも問題の一部かもしれません)。
私は、データをテーブルに表示するウェブサイトを作っています。 データの中にはテーブルで表示しなければならないオブジェクトが含まれていることがあります。 そこで、通常のテーブルの中にボーダレステーブルを入れたいのですが、ボーダレステーブルの区切り線を内側に入れたいのです。
しかし、テーブルにボーダーを表示しないように言っても、強制的に表示されてしまうようです。
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;
}
Update: Bootstrap 4.1以降では、.table-borderless
を使ってボーダーを取り除くことができます。
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
.tableクラスを