浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【HTML】【CSS】table タグを使わず table 的な幅、高さ調整をした表を作る

 table は表を表す HTML タグです。これを用いることで次の様な表の同行の中で最も高いマスに合わせた高さ、同列の中で最も広い幅のマスに合わせた幅を持つ表を作れます。

<table>: 表要素 – HTML: HyperText Markup Language | MDN
 table タグは表を作るためには便利ですが HTML タグの示す通りの表以外を作るのには向いていません。そういったそもそも table タグでマークアップすべきではないが、表のようなデザインを作りたい時があります。そういった時には次のように grid を使うことでこれを実現できます。

<div class="grid-root">
  <div>短い文字列</div>
  <div>長い文字列あいうえお</div>
  <div>長い文字列あいうえお</div>
  <div>二行の<br>文字列</div>
</div>
.grid-root {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  > div {
    border: solid 1px;
  }
}

 使っているのは display の grid と grid-template-columns の repeat と max-content です。
 display – CSS: カスケーディングスタイルシート | MDN
グリッド – ウェブ開発を学ぶ | MDN
grid – CSS: カスケーディングスタイルシート | MDN
grid-template-columns – CSS: カスケーディングスタイルシート | MDN
repeat() – CSS: カスケーディングスタイルシート | MDN
 display の grid は水平方向、垂直方向に並んだ何かしらを定義するのに優れた CSS グリッドレイアウトを扱うための宣言です。これによって .grid-root 以下がグリッドレイアウトで並ぶようになります。次いで grid-template-columns で列の総数と各列の幅を定義します。今回はrepeat(2, max-content);としてmax-contentを2列、と定義しています。これにより要素2個毎に折り返しが起き、2×2の表の見た目になります。max-contentは定義した軸内(grid-template-columns 内ならば列)の要素の最大サイズです。これにより、同列の中で最も広い幅のマスに合わせた幅を持つ列ができます。

  • この記事いいね! (0)