カテゴリー
未分類

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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA