HTML5 响应式表格（滚动条模式和列表切换式）

Responsive Tables. 预览窗口有3个表格对比，最上面的是非响应式，中间是使用滚动条，第3个是在表格和列表模式之间切换。

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Force table to not be like tables anymore */

h1 {
    font-size: 200%;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
table {
    width: 100%;
    border-collapse: collapse;
    /* Zebra striping */
}
tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td,
th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    table.responsive,
    .responsive thead,
    .responsive tbody,
    .responsive th,
    .responsive td,
    .responsive tr {
        display: block;
        /* Hide table headers (but not display: none;, for accessibility) */
    }
    .responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .responsive tr {
        border: 1px solid #ccc;
    }
    .responsive td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    .responsive td:before {
        /* Top/left values mimic padding */
        
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        /*
	Label the data
	*/
    }
    .responsive td:before {
        content: attr(data-table-header);
    }
}
.table-responsive .bootstrap {
    min-height: 0.01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
    .table-responsive.bootstrap {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive.bootstrap > .table {
        margin-bottom: 0;
    }
    .table-responsive.bootstrap > .table > thead > tr > th,
    .table-responsive.bootstrap > .table > tbody > tr > th,
    .table-responsive.bootstrap > .table > tfoot > tr > th,
    .table-responsive.bootstrap > .table > thead > tr > td,
    .table-responsive.bootstrap > .table > tbody > tr > td,
    .table-responsive.bootstrap > .table > tfoot > tr > td {
        white-space: nowrap;
    }
    .table-responsive.bootstrap > .table-bordered {
        border: 0;
    }
    .table-responsive.bootstrap > .table-bordered > thead > tr > th:first-child,
    .table-responsive.bootstrap > .table-bordered > tbody > tr > th:first-child,
    .table-responsive.bootstrap > .table-bordered > tfoot > tr > th:first-child,
    .table-responsive.bootstrap > .table-bordered > thead > tr > td:first-child,
    .table-responsive.bootstrap > .table-bordered > tbody > tr > td:first-child,
    .table-responsive.bootstrap > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }
    .table-responsive.bootstrap > .table-bordered > thead > tr > th:last-child,
    .table-responsive.bootstrap > .table-bordered > tbody > tr > th:last-child,
    .table-responsive.bootstrap > .table-bordered > tfoot > tr > th:last-child,
    .table-responsive.bootstrap > .table-bordered > thead > tr > td:last-child,
    .table-responsive.bootstrap > .table-bordered > tbody > tr > td:last-child,
    .table-responsive.bootstrap > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }
    .table-responsive.bootstrap > .table-bordered > tbody > tr:last-child > th,
    .table-responsive.bootstrap > .table-bordered > tfoot > tr:last-child > th,
    .table-responsive.bootstrap > .table-bordered > tbody > tr:last-child > td,
    .table-responsive.bootstrap > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0;
    }
}

HTML

<h1>Unresponsive Table</h1>
<table class="not-responsive">
    <thead>
        <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Favorite Color</th>
            <th scope="col">Wars of Trek?</th>
            <th scope="col">Porn Name</th>
            <th scope="col">Date of Birth</th>
            <th scope="col">Dream Vacation City</th>
            <th scope="col">GPA</th>
            <th scope="col">Arbitrary Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>Rebecca Blue</td>
            <td>Trek</td>
            <td>Butterfly</td>
            <td>11th Sept 2001</td>
            <td>Den Haag</td>
            <td>2.0</td>
            <td>I like hams</td>
        </tr>
        <tr>
            <td>The</td>
            <td>Tick</td>
            <td>Crimefighter Sorta</td>
            <td>Gold</td>
            <td>Wars</td>
            <td>Bug</td>
            <td>04th July 1996</td>
            <td>Brussels</td>
            <td>3.5</td>
            <td>Boom!</td>
        </tr>
    </tbody>
</table>

<h1>Twitter Bootstrap</h1>
<div class="table-responsive bootstrap">
    <table>
        <thead>
            <tr>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Job Title</th>
                <th scope="col">Favorite Color</th>
                <th scope="col">Wars of Trek?</th>
                <th scope="col">Porn Name</th>
                <th scope="col">Date of Birth</th>
                <th scope="col">Dream Vacation City</th>
                <th scope="col">GPA</th>
                <th scope="col">Arbitrary Data</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>James</td>
                <td>Matman</td>
                <td>Chief Sandwich Eater</td>
                <td>Rebecca Blue</td>
                <td>Trek</td>
                <td>Butterfly</td>
                <td>11th Sept 2001</td>
                <td>Den Haag</td>
                <td>2.0</td>
                <td>I like hams</td>
            </tr>
            <tr>
                <td>The</td>
                <td>Tick</td>
                <td>Crimefighter Sorta</td>
                <td>Gold</td>
                <td>Wars</td>
                <td>Bug</td>
                <td>04th July 1996</td>
                <td>Brussels</td>
                <td>3.5</td>
                <td>Boom!</td>
            </tr>
        </tbody>
    </table>
</div>

<h1>Responsive Table</h1>
<table class="responsive">
    <thead>
        <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Favorite Color</th>
            <th scope="col">Wars of Trek?</th>
            <th scope="col">Porn Name</th>
            <th scope="col">Date of Birth</th>
            <th scope="col">Dream Vacation City</th>
            <th scope="col">GPA</th>
            <th scope="col">Arbitrary Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-table-header="First Name">James</td>
            <td data-table-header="Last Name">Matman</td>
            <td data-table-header="Job Title">Chief Sandwich Eater</td>
            <td data-table-header="Favorite Color">Rebecca Blue</td>
            <td data-table-header="Wars of Trek?">Trek</td>
            <td data-table-header="Porn Name">Butterfly</td>
            <td data-table-header="Date of Birth">11th Sept 2001</td>
            <td data-table-header="Dream Vacation City">Den Haag</td>
            <td data-table-header="GPA">2.0</td>
            <td data-table-header="Arbitrary Data">I like hams</td>
        </tr>
        <tr>
            <td data-table-header="First Name">The</td>
            <td data-table-header="Last Name">Tick</td>
            <td data-table-header="Job Title">Crimefighter Sorta</td>
            <td data-table-header="Favorite Color">Gold</td>
            <td data-table-header="Wars of Trek?">Wars</td>
            <td data-table-header="Porn Name">Bug</td>
            <td data-table-header="Date of Birth">04th July 1996</td>
            <td data-table-header="Dream Vacation City">Brussels</td>
            <td data-table-header="GPA">3.5</td>
            <td data-table-header="Arbitrary Data">Boom!</td>
        </tr>
    </tbody>
</table>

Responsive Tables. 预览窗口有3个表格对比，最上面的是非响应式，中间是使用滚动条，第3个是在表格和列表模式之间切换。

编辑器支持Emmet

快捷键

Responsive Tables. 预览窗口有3个表格对比，最上面的是非响应式，中间是使用滚动条，第3个是在表格和列表模式之间切换。

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

HTML5一款很不错的响应式导航栏界面组件（Night Tabs）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：