DIV+CSS实现自适应表格布局
【摘要】 方式1：
效果：
代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .customer-page { ba...
方式1：
效果：
代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<style type="text/css">
-
.customer-page {
-
background: #FFFFFF;
-
box-shadow: 0 2px 4px 0 rgba(147, 157, 165, 0.48);
-
text-align: center;
-
}
-
-
.customer-page-table {
-
display: table;
-
width: 100%;
-
}
-
-
.table-row {
-
display: table-row;
-
}
-
-
.item-content {
-
display: table-cell;
-
}
-
-
.table-row.header .item-content {
-
font-weight: 600;
-
color: #707485;
-
}
-
-
.table-row:not(:last-child) .item-content {
-
border-bottom: 1px solid #979797;
-
}
-
-
.table-row .item-content {
-
height: 60px;
-
text-align: left;
-
line-height: 60px;
-
}
-
-
@media screen and (max-width: 500px) {
-
-
.customer-page-tabl {
-
display: inline;
-
}
-
-
.table-row {
-
border: 1px solid #ddd;
-
margin-bottom: 10px;
-
display: block;
-
border-bottom: 2px solid #ddd;
-
}
-
-
.table-row.header {
-
display: none;
-
}
-
-
.table-row .item-content {
-
display: block;
-
text-align: right;
-
font-size: 13px;
-
border-bottom: 1px dotted #ccc;
-
height: 50px;
-
line-height: 50px;
-
padding: 0 10px;
-
}
-
-
.table-row .item-content:last-child {
-
border-bottom: 0;
-
}
-
-
.table-row .item-content:before {
-
content: attr(data-label);
-
float: left;
-
text-transform: uppercase;
-
font-weight: bold;
-
}
-
}
-
</style>
-
<title>DIV+CSS实现自适应表格布局</title>
-
</head>
-
<body>
-
<div class="customer-page">
-
-
<div class="customer-page-table">
-
<div class="table-row header">
-
<div class="item-content">姓名</div>
-
<div class="item-content">邮箱</div>
-
<div class="item-content">年龄</div>
-
<div class="item-content">公司</div>
-
<div class="item-content">地址</div>
-
</div>
-
<div class="table-row body-row" data-id="13">
-
<div data-label="年龄" class="item-content">13</div>
-
<div data-label="邮箱" class="item-content">albert@163.com</div>
-
<div data-label="姓名" class="item-content">sitebuilder</div>
-
<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
-
<div data-label="地址" class="item-content">$6660.00</div>
-
</div>
-
<div class="table-row body-row" data-id="13">
-
<div data-label="年龄" class="item-content">13</div>
-
<div data-label="邮箱" class="item-content">albert@163.com</div>
-
<div data-label="姓名" class="item-content">sitebuilder</div>
-
<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
-
<div data-label="地址" class="item-content">$6660.00</div>
-
</div>
-
<div class="table-row body-row" data-id="13">
-
<div data-label="年龄" class="item-content">13</div>
-
<div data-label="邮箱" class="item-content">albert@163.com</div>
-
<div data-label="姓名" class="item-content">sitebuilder</div>
-
<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
-
<div data-label="地址" class="item-content">$6660.00</div>
-
</div>
-
<div class="table-row body-row" data-id="13">
-
<div data-label="年龄" class="item-content">13</div>
-
<div data-label="邮箱" class="item-content">albert@163.com</div>
-
<div data-label="姓名" class="item-content">sitebuilder</div>
-
<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
-
<div data-label="地址" class="item-content">$6660.00</div>
-
</div>
-
-
</div>
-
</div>
-
-
</body>
-
</html>
方式二：
代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<style type="text/css">
-
table.responsive{
-
width:98%;
-
margin: 0 auto;
-
color: #000;
-
border-collapse: collapse;
-
border: 1px solid #666666;
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-
}
-
table.responsive td,table.responsive th{
-
border: 1px solid #666666;
-
padding: .5em 1em;
-
}
-
table.responsive th {
-
background: #35B558;
-
height: 24px;
-
line-height: 24px;
-
}
-
@media (max-width:480px){
-
table.responsive thead {
-
display: none;
-
}
-
table.responsive tr, table.responsive td {
-
display: block;
-
}
-
table.responsive td{
-
padding-left: 25%;
-
}
-
table.responsive td:nth-child(1)::before {
-
content:'姓名';
-
position: absolute;
-
left: .5em;
-
font-weight: bold;
-
}
-
table.responsive td:nth-child(2)::before {
-
content:'邮箱';
-
position: absolute;
-
left: .5em;
-
font-weight: bold;
-
}
-
table.responsive td:nth-child(3)::before {
-
content:'年龄';
-
position: absolute;
-
left: .5em;
-
font-weight: bold;
-
}
-
table.responsive td:nth-child(4)::before {
-
content:'公司';
-
position: absolute;
-
left: .5em;
-
font-weight: bold;
-
}
-
table.responsive td:nth-child(5)::before {
-
content:'地址';
-
position: absolute;
-
left: .5em;
-
font-weight: bold;
-
}
-
table.responsive tr {
-
position: relative;
-
margin-bottom: 1em;
-
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
-
}
-
-
}
-
-
</style>
-
<title>DIV+CSS实现自适应表格布局</title>
-
</head>
-
<body>
-
<table class="responsive">
-
<thead>
-
<tr>
-
<th>姓名</th>
-
<th>邮箱</th>
-
<th>年龄</th>
-
<th>公司</th>
-
<th>地址</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td class="name">albert</td>
-
<td class="email">albert@163.com</td>
-
<td class="age">13</td>
-
<td class="company">XX科技网络有限公司</td>
-
<td class="addres">中国河南</td>
-
</tr>
-
<tr>
-
<td class="name">albert</td>
-
<td class="email">albert@163.com</td>
-
<td class="age">13</td>
-
<td class="company">XX科技网络有限公司</td>
-
<td class="addres">中国河南</td>
-
</tr>
-
<tr>
-
<td class="name">albert</td>
-
<td class="email">albert@163.com</td>
-
<td class="age">13</td>
-
<td class="company">XX科技网络有限公司</td>
-
<td class="addres">中国河南</td>
-
</tr>
-
<tr>
-
<td class="name">albert</td>
-
<td class="email">albert@163.com</td>
-
<td class="age">13</td>
-
<td class="company">XX科技网络有限公司</td>
-
<td class="addres">中国河南</td>
-
</tr>
-
<tr>
-
<td class="name">albert</td>
-
<td class="email">albert@163.com</td>
-
<td class="age">13</td>
-
<td class="company">XX科技网络有限公司</td>
-
<td class="addres">中国河南</td>
-
</tr>
-
</tbody>
-
</table>
-
-
</body>
-
</html>
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/105296098
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）