Chromeでも見出しセルをセンタリングする方法

Internet Explorerでは<th>タグは既定でセンタリングするんですが、Chromeの場合はどうしても左寄せになってしまうので、どうしたらいいのかとネットでググってみました。

そしたら、とりあえず、thタグのスタイルに text-align:center と記述しておいて、見出し行を<thead>で括ったらOKだったんですね。

CSSではこんな感じで

.table th {text-align:center}

HTMLではこんな感じで

<table class="table">
<thead>
<tr>
<th>商品</th><th>単価</th><th>個数</th><th>金額</th>
</tr>
</thead>
<tbody>
<tr><td>りんご</td><td>100</td><td>2</td><td>200</td></tr>
<tr><td>みかん</td><td>70</td><td>2</td><td>140</td></tr>
</tbody></table>

するとこんな感じ？

商品	単価	個数	金額
りんご	100	2	200
みかん	70	2	140