2017.02.08

Bootstrap標準クラス【tableタグ】

Bootstrapには標準でtableタグ用のクラスがあります。

以下に3つ紹介。

1.ボーダー
全てのセルにボーダーが設定されます

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

1

2

3

<table class="table table-bordered">

...

</table>

#	①	②	③
1	あああ	いいい	ううう
2	えええ	おおお	かかか

2.色の反転
テーブルの背景色が反転されます。

<table class="table table-inverse">
…
</table>

1

2

3

<table class="table table-inverse">

…

</table>

#	①	②	③
1	あああ	いいい	ううう
2	えええ	おおお	かかか

3.レスポンシブ
横幅768px以下のデバイスで閲覧した場合、横スクロールが表示されます。

<div class="table-responsive">
 <table class="table">
   ...
 </table>
</div>

1

2

3

4

5

<div class="table-responsive">

<table class="table">

...

</table>

</div>

#	①	②	③
1	あああ	いいい	ううう
2	えええ	おおお	かかか

こちらの記事も読まれています

Bootstrap

CSS3やHTML等の基本知識がある程度必要かと思いますが、初めてCSSのフレームワークを学ぶ方にはおすすめだと思います。
一応この本を参考にしてサイトを作成したところgoogleのモバイルフレンドリーテストで問題がないという判定になりました。

注意することといえばこの本に記載されているサンプルファイルですがシリアルナンバーの様なものでダウンロードが可能となっていますので、
中古で購入される方はナンバーが使用されてしまっている恐れがありダウンロードができない場合があることです。

グリッドの基本的なところを覚えて、興味のある機能を使っていく程度でそれなりのものができるかと思います。

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。