塩焼きブログ

塩焼きに関しての研究内容を公開しています

tableの各セルをtable-layout: fixedを使って自動で揃える

このようになっているセルがあるとして

f:id:hoge:20150509165148p:plain

<table class="table">
  <thead>
    <tr>
      <th>見出し</th>
      <th>見出しです</th>
      <th>見出しです2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル</td>
      <td>セルです</td>
      <td>セルです2</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セルです</td>
      <td>セルです2</td>
    </tr>
  </tbody>
</table>

table-layout: fixedを使うとこうなる

f:id:hoge:20150509165702p:plain

<table class="table" style="table-layout: fixed;">
  <thead>
    <tr>
      <th>見出し</th>
      <th>見出しです</th>
      <th>見出しです2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル</td>
      <td>セルです</td>
      <td>セルです2</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セルです</td>
      <td>セルです2</td>
    </tr>
  </tbody>
</table>