Table 要素をレスポンシブに対応させる

CSSで感動するっていう滅多にないことが起きたのでメモw

レスポンシブデザインにする上で最も面倒だったのがこのTable要素。普通にやったらスマホじゃまともに見ることができない。でもdisplay要素を巧みに変えることで、クールなUIを実現することが可能だ。

  table {
    border: 1px solid #858585;
  }
  tbody tr{
    display: block;
  }
  tbody th,
  tbody td{
    display: list-item;
    list-style: none;
    border-bottom: 1px solid #858585
  }

@media screen and (min-width:768px) {
    table {
      border-bottom: 1px solid #ddd;
      border-left: 1px solid #ddd;
    }
    tbody tr{
      display: table-row;
    }
    tbody th,
    tbody td{
      border-right: 1px solid #ddd;
      display: table-cell;
      border-bottom: none;
    }
    th {
      width: auto;
    }
}

こうすると、スマホは1行ずつ表示され、PCは普通のTable構造で表示される！ポイントはth, td を display: list-item; とするところですね。

クールだ。