【テーブル】レスポンシブテスト

レスポンシブでテーブルの形を変える

表示

イベント名	開催日	場所	料金
○×イベント	2021/01/31(日)	大阪府大阪市○×	1,100円
△□イベント	2021/02/1(月)	東京都新宿区△□	2,200円

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;
    }
}

参考

redline.hippy.jp