Bootstrapには標準でtableタグ用のクラスがあります。
以下に3つ紹介。
1.ボーダー
全てのセルにボーダーが設定されます
1 2 3 |
<table class="table table-bordered"> ... </table> |
# | ① | ② | ③ |
---|---|---|---|
1 | あああ | いいい | ううう |
2 | えええ | おおお | かかか |
2.色の反転
テーブルの背景色が反転されます。
1 2 3 |
<table class="table table-inverse"> … </table> |
# | ① | ② | ③ |
---|---|---|---|
1 | あああ | いいい | ううう |
2 | えええ | おおお | かかか |
3.レスポンシブ
横幅768px以下のデバイスで閲覧した場合、横スクロールが表示されます。
1 2 3 4 5 |
<div class="table-responsive"> <table class="table"> ... </table> </div> |
# | ① | ② | ③ |
---|---|---|---|
1 | あああ | いいい | ううう |
2 | えええ | おおお | かかか |