div实现table功能

*YH*

浏览: 192042 次
性别:
来自: 广州

最近访客更多访客>>

ccsxin201

watertonylzc

xx5333

chenyanbin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

html

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

分享到：

App_Data中数据库文件的连接配置 | EntityFramework Reverse POCO Code First ...

2018-08-03 14:20
浏览 987
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论