简洁清爽表格css

效果图

压缩后的CSS

<table class="gridtable"> table部分设置class=gridtable即可

table.gridtable{font-family:verdana,arial,sans-serif;font-size:11px;color:#333333;border-width:1px;border-color:#666666;border-collapse:collapse}
table.gridtable th{border-width:1px;padding:8px;border-style:solid;border-color:#666666;background-color:#dedede}
table.gridtable td{border-width:1px;padding:8px;border-style:solid;border-color:#666666;background-color:#ffffff}

完整html代码

<!DOCTYPE html>
<html>
<head>
	<title>简洁清爽表格css</title>
	<style type="text/css">
		table.gridtable {
			font-family:verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width:1px;
			border-color:#666666;
			border-collapse:collapse;
		}
		table.gridtable th {
			border-width:1px;
			padding:8px;
			border-style:solid;
			border-color:#666666;
			background-color:#dedede;
		}
		table.gridtable td {
			border-width:1px;
			padding:8px;
			border-style:solid;
			border-color:#666666;
			background-color:#ffffff;
		}
	</style>
</head>
<body>
	<table class="gridtable">
	  <tr>
	    <th>姓名</th>
	    <th>年龄</th>
	    <th>性别</th>
	    <th>创建时间</th>
	  </tr>
		<tr><td>张三</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
		<tr><td>李四</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
		<tr><td>王五</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
		<tr><td>赵六</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
	</table>
</body>
</html>
posted @ 2022-11-08 14:05  JaminX86  阅读(91)  评论(0)  编辑  收藏  举报