Table完整结构


基本表格
列1 列2
数据11 数据12
数据21 数据22
数据31 数据32
结尾11 结尾12
<table>
	<caption>基本表格</caption>
	<thead>
		<tr>
			<th>列1</th>
			<th>列2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>数据11</td>
			<td>数据12</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>结尾11</td>
			<td>结尾12</td>
		</tr>
	</tfoot>
</table>
默认th为粗体,没有边框
th 上下左右居中
td 上下居中,居左

带边框表格
列1 列2
数据11 数据12
数据21 数据22
数据31 数据32
结尾11 结尾12
table、td、th添加边框,默认为中空的
带边框表格
列1 列2 列3
数据11 数据12 数据13
数据21 数据22 数据23
数据31 数据32 数据33
结尾11 结尾12 结尾13
border-collapse: collapse;
列合并 colspan
列5 列6
列1 列2 列3 列4
数据11 数据12 数据14
数据21 数据23 数据24
数据31 数据32 数据33 数据34
结尾11
colspan="2"
colspan="100%" 后面全部合并

行合并 rowspan
列1 列2 列3 列4
列6 列7 列8
数据11 数据12 数据13 数据14
数据21 数据22 数据23
数据31 数据33
数据41 数据42 数据43
数据51 数据52
数据61
结尾11
rowspan="2"
rowspan="100%" 后面全部合并
rowspan于colspan可组合使用

列样式控制 colgroup
列1 列2 列3 列4 列5 列6
数据11 数据12 数据13 数据14 数据15 数据16
数据21 数据22 数据23 数据24 数据25 数据26
数据31 数据32 数据33 数据34 数据35 数据36
数据41 数据42数据42 数据43 数据44 数据45 数据46
数据51 数据52 数据53数据53数据53 数据54 数据55 数据56
数据61 数据62 数据63 数据64数据64数据64数据64 数据65 数据66
结尾11 结尾12 结尾13 结尾14 结尾15 结尾16
宽度(width)
背景颜色(background-color)
边框(border)

隔行变色
列1 列2 列3 列4 列5
数据11 数据12 数据13 数据14 数据15
数据21 数据22 数据23 数据24 数据25
数据31 数据32 数据33 数据34 数据35
数据41 数据42数据42 数据43 数据44 数据45
数据51 数据52 数据53数据53数据53 数据54 数据55
table tbody tr:nth-child(even) td {
	background-color: #fef;
}

table tbody tr:nth-child(odd) td {
	background-color: #ffe;
}

固定表头

列1 列2 列3 列4 列5
数据11 数据12 数据13 数据14 数据15
数据21 数据22 数据23 数据24 数据25
数据31 数据32 数据33 数据34 数据35
数据41 数据42数据42 数据43 数据44 数据45
数据41 数据42数据42 数据43 数据44 数据45
数据41 数据42数据42 数据43 数据44 数据45
数据41 数据42数据42 数据43 数据44 数据45
数据41 数据42数据42 数据43 数据44 数据45
数据51 数据52 数据53数据53数据53 数据54 数据55
.tbFix th {position: sticky; top: 0;}
点击列头排序
列1 列2 列3 列4 列5
数据11 数据23 数据12 数据43 数据13
数据21 数据22 数据33 数据34 数据25
数据31 数据32 数据41 数据42数据42 数据35
数据41 数据42数据42 数据43 数据44 数据45
数据15 数据24 数据44 数据34 数据45
数据41 数据42数据42 数据43 数据43 数据45
数据41 数据42数据42 数据45 数据33 数据44
数据41 数据52 数据53数据53数据53 数据54 数据42数据42
数据51 数据55 数据44 数据45 数据45

列隐藏
列1 列2 列3 列4 列5
数据11 数据23 数据12 数据43 数据13
数据21 数据22 数据33 数据34 数据25
数据31 数据32 数据41 数据42数据42 数据35
数据41 数据42数据42 数据43 数据44 数据45
数据15 数据24 数据44 数据34 数据45
数据41 数据42数据42 数据43 数据43 数据45
数据41 数据42数据42 数据45 数据33 数据44
数据41 数据52 数据53数据53数据53 数据54 数据42数据42
数据51 数据55 数据44 数据45 数据45

标准表格样式
列1 *列2 列3* 列4* *列5
数据11 数据23 数据12 数据43 数据13
数据21 数据22 数据33 数据34 数据25
数据31 数据32 数据41 数据42数据42 数据35
数据41 数据42数据42 数据43 数据44 数据45
数据15 数据24 数据44 数据34 数据45
数据41 数据42数据42 数据43 数据43 数据45
数据41 数据42数据42 数据45 数据33 数据44
数据41 数据52 数据53数据53数据53 数据54 数据42数据42
数据51 数据55 数据44 数据45 数据45
共 100 条
.tb3{
	border-collapse: collapse;
	border:solid 2px gray;
}
.tb3 th, .tb3 td{
	border:solid 0.5px gray;
	padding:5px 10px;
	text-align: center;
}
.tb3 tfoot td{
	text-align: left;
}
.tb3 thead th{
	background-color: #009;
	font-weight: normal;
	color:#fff;
}
.tb3 tbody tr:nth-child(even) td {
	background-color: #eee;
}
.tb3 tbody tr:hover{
	outline: solid 2px #900;
}
.tb3 tbody tr:hover td{
	border-top: solid 0.5px #900;
	border-bottom: solid 0.5px #900;
}

表格属性展示
用户ID 7896 编号 895623
姓名 张三 年龄 18岁
性别 身高 188cm
注册时间 2023-04-11 11:22:33 登录时间 2023-04-14 11:22:33
身份证 6102154212541254122
备注信息
.tbAttr{
	border-collapse: collapse;
	border:solid 2px gray;
}
.tbAttr th, .tbAttr td{
	border:solid 0.5px gray;
	padding:5px 10px;
	text-align: center;
	color:#000;
	font-size: 14px;
}
.tbAttr th{
	font-weight: normal;
	background-color: #eee;
	text-align: right;
	padding-left: 2em;
	padding-right: 0;
}
.tbAttr th::after{
	content: ':';
}
.tbAttr td{
	text-align: left;
	padding-right: 2em;
}

拖动排序
列1 列2 列3 列4 列5
数据11 数据23 数据12 数据43 数据13
数据21 数据22 数据33 数据34 数据25
数据31 数据32 数据41 数据42数据42 数据35
数据41 数据42数据42 数据43 数据44 数据45
数据15 数据24 数据44 数据34 数据45
数据41 数据42数据42 数据43 数据43 数据45
数据41 数据42数据42 数据45 数据33 数据44
数据41 数据52 数据53数据53数据53 数据54 数据42数据42
数据51 数据55 数据44 数据45 数据45