要创建一个具有固定标题和旋转列标题的表格,可以使用 HTML 和 CSS 来实现。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: left;
}
td {
padding: 15px;
text-align: left;
}
thead tr {
position: sticky;
top: 0;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>35</td>
<td>男</td>
<td>广州</td>
</tr>
</tbody>
</table>
</body>
</html>
在上述代码中,我们使用了 CSS 的 position: sticky
属性来实现固定标题。thead tr
是表格的表头行,通过将其 position
属性设置为 sticky
,并将 top
属性设置为 0
,可以使其在页面滚动时始终固定在顶部。
此外,我们还使用了 CSS 的 padding
属性来设置表格单元格的内边距,使用 text-align
属性来设置文本的对齐方式。
希望这个示例对你有帮助。如果你有任何其他问题,请随时提问。