【tableタグ】1列目だけ固定幅で残りは自動で均等の幅にする方法

tableの1列目だけを固定して、残りは均等幅で可変対応にするにはどうすれがいいの？

そんな疑問にお答えします。

tableを作るとき「1列目の幅だけ固定したい、残りの幅は均等にして可変にも対応させたい」ということがあります。

こういう動きのことです。

今回はその方法を紹介します。

1列目だけ固定幅で残りは自動で均等の幅にする

コード

まずコードを貼っておきます。

<table>
  <tr>
    <th>1列目</th>
    <td>2列目</td>
    <td>3列目</td>
  </tr>
  <tr>
    <th>1列目</th>
    <td>2列目</td>
    <td>3列目</td>
  </tr>
</table>

table {
  table-layout: fixed; /* tableタグに指定 */
  width: 100%; /* tableタグに指定 */
  border-collapse: collapse;
}

th{
  width: 200px; /* 幅を指定した列だけ固定。他は自動で均等*/
  height: 70px;
  background: #00CC99;
}

th,td {
  border: solid 1px;
  padding: 10px;
  vertical-align: middle; /* 上下中央配置 */
}

td {
  text-align: center; /* 左右中央配置 */
}

解説

まずtable内の列の幅を均等にする方法がこちらです。

これですべての列幅が均等になります。

あとは任意の列だけwidthを指定すれば、その列だけが指定した幅で固定され、その他は自動で均等の幅になります。

ちなみにtable作成で補足をしておくと

th,td {
  vertical-align: middle; /* 上下中央配置 */
}

td {
  text-align: center; /* 左右中央配置 */
}

tableは他の要素といろいろ違うのでややこしく感じるかもしれませんが、型さえ覚えてしまえば使い回せるのでいくつかストックを持っておいた方がいいですね。

また以前にtableを使わずにFlexboxを使ったレスポンシブ対応の表作成について記事を書いていますので、よかったらこちらもご覧ください。

【tableタグ】レスポンシブな会社概要（２列表）の作り方【Flexbox】

以上です。

• Twitter
• Facebook

投稿者 トシ

関連記事

カード型レイアウトでよく使う定番のマウスホバーパターン４選

【徹底解説】transitionプロパティの使い方をマスターしよう！【CSS】

【CSS】background-image: linear-gradientを使って背景画像を暗くする方法

【jQuery不要】HTMLとCSSのみでドロワーメニューを実装する方法

spanを使ってレスポンシブでも自然な改行にする方法

CSSで作るフェードインアニメーション