CSS

HOME
CSS
Tableレイアウト

2025年7月8日 / 最終更新日時 : 2025年7月9日 Eiji CSS

Tableレイアウト

レスポンシブ縦 / 横

横スクロール

grid-area

レスポンシブ縦 / 横

1. 枠線をborderで作成

display: grid 、 borderで作成
線幅に対して margin: -（50%）pxを追加（線幅1pxならmargin: -0.5px）

隙間なしのレイアウトは上下の線が-50%隠れるのでpadding（0.5px）を追加

borderA

A-2

A-3

bordereB

B-2

B-3

borderC

C-2

C-3

2. 枠線をoutlineで作成

display: grid 、 outlineで作成
outline-offset: 0 + background-color表示で線が重ならない

outlineA

A-2

A-3

outlineB

B-2

B-3

outlineC

C-2

C-3

.tb_border,
.tb_outline {
  display: grid;

  @media print, screen and (min-width: 768.1px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media screen and (max-width: 768px) {
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
  }

  & div {
    border: 1px solid #bbb;
    margin: -0.5px;
    padding: 1em;
    display: grid;
    justify-content: center;
    &:nth-child(3n + 1) {
      background: #f1f1f1;
    }
  }
}

.tb_outline {
  & div {
    outline: 1px solid #bbb;
    outline-offset: 0;
    background: #fff;
  }
}

横スクロール

PC:横表示 / Mobile( >736px) 横スクロール表示

スクロールで表示させる場合の注意事項
スクロールバーを常に表示などスクロールエリアがあるとユーザーに注意を促す

スクロールバーを常に表示、カスタマイズ出来るjsライブラリ

Simplebar
サンプル（別窓）
※body、textarea、table、iframeに仕様するのは非推奨

指マークでスクロールエリアに注意を向けるjsライブラリ

scroll-hint
サンプル（別窓）

TypeA

A-2

A-3

A-4

A-5

A-6

A-7

TypeB

B-2

B-3

B-4

B-5

B-6

B-7

TypeC

C-2

C-3

C-4

C-5

C-6

C-7


.table02 {
  & div {
    outline: 1px solid #bbb;
    outline-offset: 0;
    background: #fff;
    padding: 1em;
    display: grid;
    justify-content: center;
    &:nth-child(7n + 1) {
      background: #dfe4e9;
    }
  }
}

@media print, screen and (min-width: 768.1px) {
  .table02 {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
  }
}

@media screen and (max-width: 768px) {
  .table02_w {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 0 1em;
    scroll-behavior: smooth;
    padding: 0.5px 0; /* overflow-x: scroll;の影響で上の線が薄くなる対策 */
  }
  .table02 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: max(100%, 661px);
  }

  .table02 > div:nth-child(7n + 1) {
    left: 0;
    position: sticky;
    z-index: 2;
  }
}

横スクロールをつけた場合、Tableレイアウトの上下の線が 0.（50%）pxの半分になるので上下に追加のpaddingを記述

grid-area

枠線をborderで作成

display: grid 、 outlineで作成
grid-area、div:empty で Tableレイアウト

TypeA

A-2

A-3

A-5

A-6

A-7

TypeB

B-2

B-3

B-4

B-5

B-6

B-7

TypeC

C-2

.table03 {
  display: grid;
  & div {
    outline: 1px solid #bbb;
    outline-offset: -0.5px;
    background: #fff;
    padding: 1em;
    display: grid;
    justify-content: center;
    &:nth-child(7n + 1) {
      background: #f8e7e7;
    }
  }
}

@media print, screen and (min-width: 736.1px) {
  .table03 {
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
  }

  .table03 > div.a3 {
    grid-area: 3 / 1 / 5 / 2;
    align-items: center;
  }

  .table03 > div.c2 {
    grid-area: 2 / 3 / 8 / 4;
    align-items: center;
  }
}