CSS | テーブルの見出しを左寄せにする方法
CSSでテーブルの見出しを左寄せにする方法とサンプルコードを紹介しています。
テーブルの見出しを左寄せにする
主要ブラウザでは、tableタグのth要素（テーブルのヘッダーセル）は初期値のスタイル指定で中央揃えに設定されています。
th要素（テーブルのヘッダーセル）を左寄せにしたい場合、改めてスタイルを指定する必要があります。
See the Pen CSS | Overlap Table borders by yochans (@yochans) on CodePen.
<table>
<thead>
<tr>
<th>name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>100</td>
</tr>
<tr>
<td>Pine</td>
<td>100</td>
</tr>
</tbody>
</table>テーブルの見出し部分を左寄せにするには、th要素に対して「text-align」プロパティで「left」を指定します。
また、左寄せ時に余白を付けたい場合、「padding」や「padding-left」などで調節します。
th {
text-align: left;
padding: 5px;
}