table表格实现

最新推荐文章于 2023-08-31 16:34:18 发布

兮夏-

最新推荐文章于 2023-08-31 16:34:18 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/m0_46693606/article/details/119349982

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table,
			table tr  th,
			table tr  td {
				border: 0.5px solid #cbcbcb;
			}
			 table tr {
				 display: flex;
			 }
            table tr  th{
				height: 40px;
				background-color: #f9f9f9;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			table tr  td{
				height: 40px;
				flex: 5;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			table {
				width: 100%;
				border-collapse: collapse;
				padding: 2px;
			}

		</style>
	</head>
	<body>
		<table class="table-wrap">
			<tr>
				<th>项目名称:</th>
				<td>Data</td>
				<th>工程代码</th>
				<td>Data</td>
			</tr>
			<tr>
				<th>项目单位</th>
				<td>Data</td>
				<th>项目阶段</th>
				<td>Data</td>
			</tr>
		</table>
	</body>
</html>