sou
7/11/2017 - 5:19 AM

レスポンシブテーブル 400px以下で横スクロール

レスポンシブテーブル 400px以下で横スクロール

table.style.html
content_copyfile_download
<table class="tableStyle">
    <thead class="tableStyle__title">
        <tr class="tableStyle__title-inner">
            <th class="tableStyle__title-subInner">AAAAAA</th>
            <th class="tableStyle__title-subInner">BBBBBB</th>
            <th class="tableStyle__title-subInner">CCCCCC</th>
            <th class="tableStyle__title-subInner">DDDDDD</th>
        </tr>
    </thead>
    <tbody class="tableStyle__body">
        <tr class="tableStyle__body_inner">
            <th class="tableStyle__body-subInner">11111</th>
            <td class="tableStyle__body-subInnerTd">22222</td>
            <td class="tableStyle__body-subInnerTd">333333</td>
            <td class="tableStyle__body-subInnerTd">444444</td>
        </tr>
         <tr class="tableStyle__body_inner">
            <th class="tableStyle__body-subInner">11111</th>
            <td class="tableStyle__body-subInnerTd">22222</td>
            <td class="tableStyle__body-subInnerTd">333333</td>
            <td class="tableStyle__body-subInnerTd">444444</td>
        </tr>
         <tr class="tableStyle__body_inner">
            <th class="tableStyle__body-subInner">11111</th>
            <td class="tableStyle__body-subInnerTd">22222</td>
            <td class="tableStyle__body-subInnerTd">333333</td>
            <td class="tableStyle__body-subInnerTd">444444</td>
        </tr>
    </tbody>
<!--/.tableStyle--></table>
table.style.css
content_copyfile_download
.tableStyle {
    margin:0 auto;
    border-collapse: collapse;
    text-align: center;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
}

.tableStyle .tableStyle__title-subInner,
.tableStyle .tableStyle__body-subInner,
.tableStyle .tableStyle__body-subInnerTd {
    padding: 10px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

.tableStyle .tableStyle__title-subInner,
.tableStyle .tableStyle__body-subInner {
    background-color: #eee;
}

@media screen and (max-width: 400px) {
    .tableStyle {
        position: relative;
        display: block;
    }
    .tableStyle .tableStyle__title {
        display: block;
        float: left;
    }
    .tableStyle .tableStyle__body {
        position: relative;
        display: block;
        overflow-x: auto;
        width: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tableStyle .tableStyle__title-subInner,
    .tableStyle .tableStyle__body-subInner,
    .tableStyle .tableStyle__body-subInnerTd {
        display: block;
    }
    .tableStyle .tableStyle__body_inner {
        display: inline-block;
    }
    .tableStyle .tableStyle__body .tableStyle__body_inner {
        margin-right: -5px;
    }
}