您的位置：首页 > Web前端 > CSS

用CSS伪元素实现自适应布局表格

2016-07-28 14:30 405 查看
首先看效果：

图一：



如上图所示是在较大屏幕下的表格显示效果，和普通表格没什么区别。

图二：



如图是在屏幕宽度小于600px时的效果，每一行单独成块，保证表格内容都显示出来，你可能好奇表格标题是怎么达到每行都显示的，并且拍成列的形式，其实并没有用到太多css代码，核心是用css伪元素：before实现的！。

全部代码：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS伪元素实现自适应布局表格</title>
<style>
body{
font-family: arial;
}

table{
border:1px solid #ccc;
width: 80%;
margin: 0;
padding: 0;
border-collapse: collapse;/*表格边框合并形式*/
border-spacing: 0;
margin:0 auto;
}

table tr{
border:1px solid #ddd;
padding:5px;
}

table th,table td{
padding:10px;
text-align: center;
}

table th{
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
/*屏幕宽度小于600px时触发*/
@media screen and (max-width: 600px){

table{
border:0;
}

table thead{
display: none;
}

table tr{
margin-bottom: 10px;
display: block;/*设置成块级元素实现换行*/
border-bottom: 2px solid #ddd;
}

table td{
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}

table td:last-child{
border-bottom: 0;
}

table td:before{/*模拟标题的效果*/
content:attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>支付</th>
<th>日期</th>
<th>金额</th>
<th>周期</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="支付">支付 #1</td>
<td data-label="日期">02/01/2015</td>
<td data-label="金额">$2.311</td>
<td data-label="周期">01/01/2015-01/31/2015</td>
</tr>
<tr>
<td data-label="支付">支付 #2</td>
<td data-label="日期">03/01/2015</td>
<td data-label="金额">$3,211</td>
<td data-label="周期">02/01/2015-02/28/2015</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航