Tableセルの特定のものだけ大きくする方法

Web言語

2021年1月6日

今回はtable内の特定のセルのみ大きくする方法を紹介していきたいと思います。

結果的にはこのような感じです。

このように「１」の部分だけサイズ、色を変更して目立たせる方法です。

やっていきましょう。

やり方

私が実践したやり方は、「１」を大きくするというよりも、「２」「３」「４」「５」を小さくすることで「１」を相対的に大きく見せました。

順序

テーブルを作る
「１」にクラスをつける
「１」以外にクラスをつける
「１」以外にborder-topをつける

テーブルを作る

まず普通にテーブルを作成してください。
量が多いテーブルに関しては簡単に作れるツールがWeb上にありますのでうまく活用すると良いかもしれません。

「１」にクラスをつける

次に大きくさせたいセル（「１」）にクラスを付けます。
ここではbicの「b」をとってクラスを付けました。

「１」以外にクラスをつける

次に１行目の「１」以外にクラスを付けてください。
ここではlineの「l」をとってクラスを付けました。

「１」以外にborder-topをつける

次に「１」以外にborder-topをつけます。
ここで　border-top: 40px solid white;　と指定することで背景の白と同化し相対的に小さく見せています。
この部分が今回のポイントとなります。

コード

これまで説明したコードが以下のようになります。

Html

<table class="test">
    <tr>
    <td class="b">1</td>
    <td class="l">2</td>
    <td class="l">3</td>
    <td class="l">4</td>
    <td class="l">5</td>
    </tr>
    <tr>
      <td>あ</td>
      <td>あい</td>
      <td>あいう</td>
      <td>あいうえ</td>
      <td>あいうえお</td>
      </tr>
</table>

Css

.test {
  margin: 50px auto;
}

.test tr td {
  font-size: 20px;
  text-align: center;
  width: 100px;
  height: 50px;
  background-color: #b0f5c4;
}

.test tr .l {
  border-top: 40px solid white;
}

.test tr .b {
  background-color: #f35336;
}

コピペしてご自由にお使いください。