<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>table_div_css</title>
<style>
/*div + css 实现的表格，相比于 table 标签，有如下优点：
1.提高页面浏览速度。
不再需要，在每一列，逐行比对列宽，看谁最宽就用谁的宽度；
在每一行里，逐列比对行高，看谁最高，就用谁的高度。
2.结构清晰，样式和内容相分离，更好地控制页面布局、字体，使页面真正赏心悦目。
*/
.table {
/*元素作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
display: table;
table-layout: fixed;
border: 1px solid #ccc;
border-collapse: collapse;
width: 300px;
}
.table-caption {
/*元素作为一个表格标题显示（类似 <caption>）*/
display: table-caption;
margin: 5px 0px;
font-size: 1em;
width: 300px;
text-align: center;
}
.table-header-group {
/*元素作为一个或多个行的分组来显示（类似 <thead>）。*/
display: table-header-group;
/*background: rgba(238,238,238, 0.5);*/
font-weight: bold;
}
.table-row-group {
/*元素作为一个或多个行的分组来显示（类似 <tbody>）。*/
display: table-row-group;
}
.table-footer-group {
/*元素作为一个或多个行的分组来显示（类似 <tfoot>）。*/
display: table-footer-group;
}
ul {
list-style: none;
}
.table-row {
/*元素作为一个表格行显示（类似 <tr>）。*/
display: table-row;
}
.table-cell {
/*元素作为一个表格单元格显示（类似 <td> 和 <th>）*/
display: table-cell;
padding: 5px 0px;
border: 1px solid #ccc;
text-align: center;
}
.table-row-group .table-row:hover,
.table-footer-group .table-row:hover {
background: #f6f6f6;
color: purple;
font-weight: bold;
}
.table-column-group {
/*元素作为一个或多个列的分组来显示（类似 <colgroup>）。*/
display: table-column-group;
}
.table-column {
/*元素作为一个单元格列显示（类似 <col>）*/
display: table-column;
}
.width1 {
width: 100px;
}
.width2 {
width: 80px;
}
.width3 {
width: 60px;
}
.columm1 {
background: rgba(0, 255, 0, 0.2);
}
</style>
</head>
<body>
<h2 class="table-caption">花名册：</h2>
<div class="table">
<!--此行代码用于：控制列的样式。-->
<div class="table-column-group">
<div class="table-column width1 columm1"></div>
<div class="table-column width2"></div>
<div class="table-column width3"></div>
</div>
<!--如果不写上一个 div, 也可以把样式写在以下 div 里。 -->
<div class="table-header-group">
<ul class="table-row">
<li class="table-cell">序号</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年龄</li>
</ul>
</div>
<div class="table-row-group">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">John</li>
<li class="table-cell">19</li>
</ul>
<ul class="table-row">
<li class="table-cell">2</li>
<li class="table-cell">Mark</li>
<li class="table-cell">21</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">Kate</li>
<li class="table-cell">26</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">Kate</li>
<li class="table-cell">26</li>
</ul>
</div>
<div class="table-footer-group">
<ul class="table-row">
<li class="table-cell">序号</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年龄</li>
</ul>
</div>
</div>
</body>
</html>
1782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
