【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

投稿者 トシ

関連記事

【CSS】背景画像を複数重ねて表示する方法

【CSS】hoverしたときに透過させた黒いマスクをかける方法

【Flexbox】横並びにした画像とテキストを上下中央配置にする方法

【before・after】疑似要素を使って見出しに線を引く方法

CSSのみのドロップダウンメニューの作り方【多階層メニュー】

【CSS】ネガティブマージンの使い方【初心者向け】