div实现table功能

div布局主要用到的css属性

table此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。

table-row-group此元素会作为一个或多个行的分组来显示(类似<tbody>)。

table-header-group此元素会作为一个或多个行的分组来显示(类似<thead>)。

table-footer-group此元素会作为一个或多个行的分组来显示(类似<tfoot>)。

table-row此元素会作为一个表格行显示(类似<tr>)。

table-column-group此元素会作为一个或多个列的分组来显示(类似<colgroup>)。

table-column此元素会作为一个单元格列显示(类似<col>)

table-cell此元素会作为一个表格单元格显示(类似<td>和<th>)

table-caption此元素会作为一个表格标题显示(类似<caption>)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面测试</title>
<style type="text/css">
			.table,.table*{
				margin: 0 auto; 
				padding: 0;
				font-size: 14px;
				font-family: Arial, 宋体, Helvetica, sans-serif;
			}
			.table{
				display: table;
				width: 80%; 
				border-collapse: collapse;
			}
			.tab_tr {
				display: table-row; 
				height: 30px;
			}
			.tab_th{
				display: table-cell;
				font-weight: bold;			/*给标题字体加粗*/
				height: 100%;
				border: 1px solid gray;    /*设置单元格边框*/
				text-align: center;
				vertical-align: middle;
			}
			.tab-td{
				display: table-cell;
				height: 100%;
				border: 1px solid gray; 
				text-align: center;
				vertical-align: middle;
		</style>
	</head>
	<body>
		<div>
			<div class="table">
				<div class="tab_tr">
					<div class="tab_th">名称</div>
					<div class="tab_th">key值</div>
					<div class="tab_th">value值</div>
					<div class="tab_th">创建人ID</div>
					<div class="tab_th">创建时间</div>
					<div class="tab_th">修改人ID</div>
					<div class="tab_th">修改时间</div>
					<div class="tab_th">删除标记</div>
					<div class="tab_th">操作</div>
				</div>
				<div class="tab_tr">
					<div class="tab-td">名称</div>
					<div class="tab-td">key值</div>
					<div class="tab-td">value值</div>
					<div class="tab-td">创建人ID</div>
					<div class="tab-td">创建时间</div>
					<div class="tab-td">修改人ID</div>
					<div class="tab-td">修改时间</div>
					<div class="tab-td">删除标记</div>
					<div class="tab-td">编辑|删除</div>
				</div>
			</div>
		</div>
	</body>
</html>

参考:https://www.cnblogs.com/joshinrai/p/6668392.html

相关推荐