1 先看一段代码
css代码如下所示：
/* 定义表格整体的宽度、边框样式和间距 */
table {
width: 100%; /* 设置表格占据100%宽度 */
border-collapse: collapse; /* 合并表格边框 */
margin-top: 30px; /* 设置表格与上方元素的间距 */
}
/* 定义表格头和单元格的内边距、对齐、边框 */
table th, table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd; /* 为单元格底部增加灰色边框 */
## border: 1px solid #ddd; /* 为表头和单元格添加边框 */
}
/* 定义表格的内景色、文字加粗、颜色 */
table th {
background-color: #f2f2f2;
font-weight: bold;
color: #444;
}
/* 偶数行的背景色、用于交替显示 */
table tr:nth-child(even) {
background-color: #f9f9f9;
}
/* 当鼠标悬停在行上的时候，改变该行的背景颜色，增加交互性 */
table tr:hover {
background-color: #e9e9e9;
}
2 用于修饰的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格示例</title>
<link rel="stylesheet" href="static/index.css">
<!-- <style></style> -->
</head>
<body>
<h1>表格示例</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>35</td>
<td>深圳</td>
</tr>
</tbody>
</table>
</body>
</html>
这样做下来的最终效果图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
