Corredor

ウェブ、プログラミングの勉強メモ。

Bootstrap でテーブルのセル幅を指定する時に Grid System の col-* が使える

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

Bootstrap 3 系で確認。Bootstrap 4 系でも大丈夫そう。

Bootstrap でテーブルを作る時、セル幅を指定するために .col-xs-6 などの Grid System のクラスが使えることを知った。

Grid System はネガティブマージンと float を利用しているので、.row のないところで使えないだろう、と思っていたが、table 向けにスタイルがリセットされていた。

つまり、以下のように指定できる。

<table class="table">
  <thead>
    <tr>
      <th class="col-xs-2">No.</th>
      <th class="col-xs-7">Name</th>
      <th class="col-xs-3">Age</th>
    </tr>
  ...
</table>

tdth 要素に .col-* クラスを付与した場合は、各種スタイルがリセットされており、残るは width 指定のみとなるので、幅指定ができるようだ。

もし12カラムを超えるようなクラスを指定した場合は、floatdisplay などは影響してこないので、単純にブラウザが width をどう解釈するかに任される。

自分で width 指定だけのクラスを作ったりするよりは .col-* を使う方が Bootstrap っぽくて良いかも。