【テーブル】レスポンシブテスト
レスポンシブでテーブルの形を変える
tag
<table> <thead> <tr> <th>イベント名</th> <th>開催日</th> <th>場所</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td data-label="イベント名">○×イベント</td> <td data-label="日時">2021/01/31(日) </td> <td data-label="場所">大阪府大阪市○×</td> <td data-label="料金">1,100円</td> </tr> <tr> <td data-label="イベント名">△□イベント</td> <td data-label="日時">2021/02/1(月)</td> <td data-label="場所">東京都新宿区△□</td> <td data-label="料金">2,200円</td> </tr> </tbody> </table>
CSS
table{ width:100%; border-collapse:collapse; border-spacing:0; border:1px solid #ccc; padding:0; margin:0; } table tr{ border:1px solid #ddd; padding:5px; } table th, table td{ padding:10px; text-align:center; } table th{ font-size:14px; letter-spacing:1px; } @media screen and (max-width: 600px) { table{ border:0; } table thead{ display:none; } table tr{ margin-bottom:10px; display:block; border-bottom:2px solid #ddd; } table td{ display:block; text-align:right; font-size:13px; border-bottom:1px dotted #ccc; } table td:last-child{ border-bottom:0; } table td:before { content:attr(data-label); float:left; font-weight: bold; } }