Drafts

@cm3 の草稿置場 / 少々Wikiっぽく使っているので中身は適宜追記修正されます。

モバイルなど小さな画面用にCSSのみでtableを整形する

f:id:cm3ak:20210307214258p:plain
大きな画面での一般的な表

f:id:cm3ak:20210307214329p:plain
モバイルなど小さな画面用にCSSのみでtableを整形する

基本 td を display:block にすれば、表が折り返される。気をつけないといけないのは <!DOCTYPE html> 書いておかないと Webkit が display: block; を display: table-cell; に上書きしちゃうので、 <!DOCTYPE html>が必須。以下が実際に書いた css。border も削って、before 使って th 相当の部分を入れ込んでいる。

@media (max-width: 1200px) {
 th,td {
    display: block;
    border: 0px none !important;
 }
 tr{
    border: 1px solid #cbcbcb !important;
 }
 thead{
    display:none;
 }
 td:nth-child(2), td:nth-child(3) {
    padding-left: 3em;
 }
 td:nth-child(2)::before{
    content: "Country: ";
 }
 td:nth-child(3)::before{
    content: "Members: ";
 }
}

参考: