どうも7noteです。table要素のちょいテク。

tableの子要素は幅を自動調整される特徴がありますが、どちらかというと幅を指定したい時が多いです。
そしてスマホの時には「1列目だけ幅を固定しつつも、全体は100%表示させたい」なんて方向けの記事です。

ソース

index.html

<table>
  <tr>
    <th>1列目</th>      <!-- 1列目を[th]にしています。 -->
    <td>2列目</td>
    <td>3列目</td>
  </tr>
  <tr>
    <th>1列目</th>
    <td>2列目</td>
    <td>3列目</td>
  </tr>
</table>

style.css

table {
  table-layout: fixed;  /* table要素に指定することで、幅を固定 */
  width: 100%;
}
table th{
  width: 200px;         /* 幅を指定した要素だけ固定される。他は等倍の可変 */
}

まとめ

シンプルですが、ついつい書き方を忘れてしまいそうなのでメモメモ。
必要ないですが、table-layout: fixed;を使わなくても、thにmin-width: ??px;を指定して、他の要素にwidth: 100%;を指定することでも似たような処理をできます。

過去にtableを使わずにレスポンシブ対応の表組を作る方法の記事もかいてますので、よければこちらもご覧ください。
→【初心者でも分かる】定義リスト（dl）を使って、tableみたいな表組みデザインを作る方法（レスポンシブ対応）

おそまつ！