1. ホーム
  2. ハイパーリンク

[解決済み】ストライプ/ボーダーなしのBootstrapテーブル

2022-04-09 22:39:45

質問

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

更新しました。 Bootstrap 4.1以降では、以下のように .table-borderless を使用すると、ボーダーを取り除くことができます。

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