flexレイアウトを使ってレスポンシブテーブルをつくる -『responsive』
- uto usui
- //
- responsive
- table
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);
}