Bootstrapでテーブルをデザインする

HTML・CSS

Bootstrapでテーブルのデザインをするときは、tableのclassに”table”と記述します。
参考ページ:Tables

<table class="table">
.....
</table>

table

ストライプ

行ごとにストライプ(縞)模様にするには、classに”table-striped”を追加します。

<table class="table table-striped">
</table>

table2

ボーダーにラインを入れる

テーブルとセルのボーダーにラインを入れるには、classに”table-bordered”を追加します。

<table class="table table-bordered">
.....
</table>

table3

ホバー(hover)表示させる

マウスのカーソルを合わせるとホバー(hover)するには、classに”table-hover”を追加します。

<table class="table table-hover">
...
</table>

table5

セルの余白をカットするには、classに”table-condensed”を追加します。

<table class="table table-condensed">
...
</table>
スポンサーリンク

コメント

タイトルとURLをコピーしました