CSS3 简易的响应式表格模板

Simple Responsive Table in CSS

CSS3, table, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 11937
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.25;
}
table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}
table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}
table tr {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
}
table th,
table td {
    padding: .625em;
    text-align: center;
}
table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
}
@media screen and (max-width: 600px) {
    table {
        border: 0;
    }
    table caption {
        font-size: 1.3em;
    }
    table thead {
        display: none;
    }
    table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
    }
    table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
    }
    table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
    table td:last-child {
        border-bottom: 0;
    }
}

HTML

<table>
    <caption>Statement Summary</caption>
    <thead>
        <tr>
            <th scope="col">Account</th>
            <th scope="col">Due Date</th>
            <th scope="col">Amount</th>
            <th scope="col">Period</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row" data-label="Account">Visa - 3412</td>
            <td data-label="Due Date">04/01/2016</td>
            <td data-label="Amount">$1,190</td>
            <td data-label="Period">03/01/2016 - 03/31/2016</td>
        </tr>
        <tr>
            <td scope="row" data-label="Account">Visa - 6076</td>
            <td data-label="Due Date">03/01/2016</td>
            <td data-label="Amount">$2,443</td>
            <td data-label="Period">02/01/2016 - 02/29/2016</td>
        </tr>
        <tr>
            <td scope="row" data-label="Account">Corporate AMEX</td>
            <td data-label="Due Date">03/01/2016</td>
            <td data-label="Amount">$1,181</td>
            <td data-label="Period">02/01/2016 - 02/29/2016</td>
        </tr>
        <tr>
            <td scope="row" data-label="Acount">Visa - 3412</td>
            <td data-label="Due Date">02/01/2016</td>
            <td data-label="Amount">$842</td>
            <td data-label="Period">01/01/2016 - 01/31/2016</td>
        </tr>
    </tbody>
</table>

Simple Responsive Table in CSS

CSS3, table, template

编辑器支持Emmet

快捷键

Simple Responsive Table in CSS

CSS3, table, template

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

一款响应式CSS3网格布局模板（带@support特性查询）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：