テーブルをスマホにするには

ブレイクポイント

プレビュー

PCスマホ

コード

CSS

.wrapper {
    width: 800px;
    margin: auto;
}
table {
    margin: 100px 0;
}
.cp_table *, .cp_table *:before, .cp_table *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cp_table {
    width: 100%;
    border-collapse: collapse;
    border-right: 1px solid #dddddd;
}
.cp_table thead th {
    padding: 10px 15px;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    background: #dddddd;
}
.cp_table thead th:last-child {
    border-right: 1px solid #dddddd;
}
.cp_table tbody th {
    padding: 10px 15px;
    vertical-align: top;
    border-bottom: 1px solid #ffffff;
    background: #dddddd;
    white-space: nowrap;
}
.cp_table tbody tr:last-child th {
    border-bottom: 1px solid #dddddd;
}
.cp_table tbody td {
    padding: 10px 15px;
    vertical-align: top;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    background: #ffffff;
}
@media screen and (max-width: 414px) {
    .wrapper {
        width: 100vw;
        overflow: hidden;
    }
}

/*---- ここから下にPC・スマホ共用CSSを記述ください ----*/

/*---- ここから下にスマホ用CSSを記述ください ----*/

@media screen and (max-width: 320px) {

HTML

戻る