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

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

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

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

• 参考 : bootstrap/tables.less at v3.3.7 · twbs/bootstrap · GitHub

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

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

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

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

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