リスト<li>タグで表を作る方法

もくじ

• 表示例
• HTMLコード
• CSSコード
• 使用上の注意点

表示例

• • 見出し１
  • 見出し２
  • 見出し３
  • あああああ
  • いいいいい
  • ううううう
  • えええええ
  • おおおおお
  • かかかかか

HTMLコード

• • <ul class="row">
  • <li>見出し１
  • <li>見出し２
  • <li>見出し３
  • <li>あああああ
  • <li>いいいいい
  • <li>ううううう
  • <li>えええええ
  • <li>おおおおお
  • <li>かかかかか
  • </ul>

CSSコード

• • :root{
  • /*横幅*/--row-width:480px;
  • /*列数*/--row-num:3;
  • /*線色*/--row-border-color:rgb(199,199,199);
  • /*外影*/--row-box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
  • /*背景*/--row-background-color:rgb(252,252,252);
  • /*行間*/--row-line-height:1.6;
  • /*----*/
  • /*背景*/--row-midashi-background-color:rgb(37,37,37);
  • /*文字*/--row-midashi-color:rgb(249,249,249);
  • }
  • ul.row{
  • width:100%;max-width:var(--row-width);margin:0 auto;padding:0;box-shadow:var(--row-box-shadow);box-sizing:border-box;background-color:var(--row-background-color);line-height:0;
  • }
  • ul.row li{
  • display:inline-block;width:calc(100% / var(--row-num));min-width:1px;padding:8px calc(1em * var(--row-line-height) / 2) 8px calc(1em * var(--row-line-height) / 2);border-top:solid 1px var(--row-border-color);box-sizing:border-box;background-color:var(--row-background-color);vertical-align:top;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;line-height:var(--row-line-height);
  • }
  • ul.row li:nth-child(-n+3){
  • border-top:0;background-color:var(--row-midashi-background-color);color:var(--row-midashi-color);
  • }

使用上の注意点

• [リスト全体]と[個別のリスト]で異なる背景色を指定すると、横のリストと行数が異なる時、行数が少ない方の下にできる余白の背景色は[リスト全体]の方の背景色になります。
• [個別のリスト]の左右に枠線を引くと、横のリストと行数が異なる時、行数が少ない方の下にできる余白には線が引かれません。