响应式表格

前端开发whqet,csdn,王海庆,whqet,前端开发专家

来继续看一个响应式表格，重点学习媒体查询，智能手机中将表头隐藏，利用:before伪对象伪造表头，效果见如下图所示。

在线研究点这里，下载收藏点这里，千万别忘了改变下屏幕宽度试试响应式哟。

ok, let's go.

html文件里面，我们得有table

<h1>A responsive table</h1>
 
<table class="responsive">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="organisationnumber">140406</td>
            <td class="organisationname">Stet clita kasd gubergren, no sea takimata sanctus est</td>
            <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a>
 <a href="?" class="remove-item" title="Remove">Remove</a>
 
            </td>
        </tr>
        <tr>
            <td class="organisationnumber">140412</td>
            <td class="organisationname">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</td>
            <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a>
 <a href="?" class="remove-item" title="Remove">Remove</a>
 
            </td>
        </tr>
        <tr>
            <td class="organisationnumber">140404</td>
            <td class="organisationname">Vel illum dolore eu feugiat nulla facilisis at vero eros</td>
            <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a>
 <a href="?" class="remove-item" title="Remove">Remove</a>
 
            </td>
        </tr>
        <tr>
            <td class="organisationnumber">140408</td>
            <td class="organisationname">Iusto odio dignissim qui blandit praesent luptatum zzril delenit</td>
            <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a>
 <a href="?" class="remove-item" title="Remove">Remove</a>
 
            </td>
        </tr>
        <tr>
            <td class="organisationnumber">140410</td>
            <td class="organisationname">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam</td>
            <td class="actions"> <a href="?" class="edit-item" title="Edit">Edit</a>
 <a href="?" class="remove-item" title="Remove">Remove</a>
 
            </td>
        </tr>
    </tbody>
</table>

然后，我们来看css文件，首先是480px以上屏幕中的表现

body {
    padding: 1em;
}
a {
    color: #739931;
}
.page {
    max-width: 60em;
    margin: 0 auto;
}
table th {
    text-align: left;
}
table.responsive {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
table.responsive th, table.responsive td {
    border: 1px solid #B3BFAA;
    padding: .5em 1em;
}
table.responsive th {
    background: #D5E0CC;
}
table.responsive td {
    background: #fff;
}
table.responsive {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

在480px以下，我们要使用媒体查询啦

@media (max-width: 30em) {
    table.responsive {
        box-shadow: none;
    }
    table.responsive thead {
        display: none;
    }
    table.responsive td:nth-child(1):before {
        content:'Number';
    }
    table.responsive td:nth-child(2):before {
        content:'Name';
    }
    table.responsive td:nth-child(1), table.responsive td:nth-child(2) {
        padding-left: 25%;
        min-height:1.5em; /*纠正空数据位置问题，当然空数据问题最好在服务器端进行处理。*/
    }
    table.responsive td:nth-child(1):before, table.responsive td:nth-child(2):before {
        position: absolute;
        left: .5em;
        font-weight: bold;
    }
    table.responsive tr, table.responsive td {
        display: block;
    }
    table.responsive tr {
        position: relative;
        margin-bottom: 1em;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive td {
        border-top: none;
    }
    table.responsive td.organisationnumber {
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.responsive td.actions {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}

嗯，这个就完成了，你觉得咋样，请发表高见。

在线研究点这里，下载收藏点这里，千万别忘了改变下屏幕宽度试试响应式哟。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------