HTML: table をグリッド代わり (2)

・td 内に div を配置。
  div の位置(margin-left)と 幅(width)を % で指定した例。
  % で指定すると td の幅にあわせて自動的に調整されるので楽になる。

・div の大きさは box-sizing: border-box;
  div 内の padding が変わってもサイズが変わらないようにする。

テーブルサンプル
0	100	200	300	400
左10%,幅80% 左50%, 幅100% 左100%, 幅200% サンプルテキスト左230%, 幅150% サンプルテキスト左70%, 幅300% サンプルテキスト

(2016/09-2022/04)
動作     : Edge99, Firefox95, Chrome96

・ウインド幅を変えたときに table 幅が変わらないように注意。

・(2022/04)
  CSS grid を使うとどうなるか？
  CSS var で単純化するには？

・(2017/06)
  td div {...} に postion:relative; と z-index の指定が必要。
  ないと IE, Chrome で div が td の下側に回る。