【CSS】 <table>タグをCSS gridで実現する<table>タグは表を表示するのに使うHTMLタグですが、表示のレイアウト挙動が独特です。例えばheightプロパティがmin-heightっぽく振る舞ったり、table-layoutプロパティの値をfixedにしないとwidthが効かなかったりと慣れが必要です。ほかにもcolspan属性やrowspan属性によってセルの結合ができるので、レイアウトがHTMLとも密接した関係があります。 かつてはページレイアウトに必須だった時代もある歴史のあるタグですが、現代においては少し使いづらい点があります。一方でCSS Gridが登場し、柔軟なグリッドレイアウトが可能になっています。 そこで<table>タグを利用しつつもCSS Gridでレイアウトを実現する方法を紹介します。 ▼実際のサンプル 以下のHTMLをもとに解説していきます。 <table> <thead> <th>見出し</th> <
