Table style

index.html

<div style="width: 18em">
    <table>
        <thead>
            <tr>
                <th>-- 项 ----- 目 --</th>
                <th>　　价　　　格　　</th>
                <th>-- 数 ----- 量 --</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>台式机</td>
                <td>$1600</td>
                <td>8</td>
            </tr>
            <tr>
                <td>手机</td>
                <td>$800</td>
                <td>10</td>
            </tr>
            <tr>
                <td>笔记本</td>
                <td>$1400</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>
</div>

script.js

[].slice.call(document.querySelectorAll('table')).forEach(function(el){
    var wrapper = document.createElement('div');
    wrapper.className = 'table-area';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
})

style.stylus

table
    width 100%
    max-width 65em
    border 1px solid #dedede
    margin 15px auto
    border-collapse collapse
    empty-cells show
    th,td
        height 35px
        border 1px solid #dedede
        padding 0 10px
    th
        font-weight bold
        text-align center !important
        background rgba(158, 188, 226, .2)
        white-space nowrap
    tbody tr:nth-child(2n)
        background rgba(158, 188, 226, .12)
    td:nth-child(1)
        white-space nowrap
    tr:hover
        background #efefef

.table-area
    overflow auto

Table style.markdown

Table style

A Pen by MOxFIVE on CodePen.

License.