flexレイアウトを使ってレスポンシブテーブルをつくる -『responsive』

flexレイアウトを使って、レスポンシブに変化するテーブルをつくります。


@media (min-width: 769px) {
  .table {
    display: flex;
    //
    tr {
      display: flex;
      flex-direction: column;
    }
    th {
      border-top: 0;
      border-bottom: 0 !important;
    }
    td {
      border-top: 0;
    }
  }
  .table_body {
    display: flex;
  }
}

.table_head {
  background-color: rgba(black,.1);
}

.table_body {
  background-color: rgba(white,.35);
}

share
ー

related
ー