css制作表格6
使用CSS创建表格的方法
HTML结合CSS可以灵活地创建表格样式，以下介绍几种常见方式：
基础表格样式
通过HTML的<table>标签配合CSS定义边框和间距：
<table class="basic-table">
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>.basic-table {
border-collapse: collapse;
width: 100%;
}
.basic-table th, .basic-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.basic-table th {
background-color: #f2f2f2;
}斑马纹表格
通过:nth-child()伪类实现交替行颜色：
.zebra-table tr:nth-child(even) {
background-color: #f9f9f9;
}响应式表格
在小屏幕设备上添加横向滚动：
.responsive-table {
overflow-x: auto;
}悬停高亮效果
为表格行添加鼠标悬停交互：
.hover-table tr:hover {
background-color: #e9e9e9;
}圆角边框表格
通过CSS3属性实现现代视觉效果：
.rounded-table {
border-radius: 5px;
overflow: hidden;
}
.rounded-table th:first-child {
border-top-left-radius: 5px;
}
.rounded-table th:last-child {
border-top-right-radius: 5px;
}固定表头表格
当表格内容较长时固定表头位置：
.fixed-header {
position: sticky;
top: 0;
z-index: 10;
}以上方法可根据实际需求组合使用，通过调整CSS属性如padding、border、background等可获得不同的视觉效果。
