用css制作表格
使用CSS制作表格
CSS可以用来样式化HTML表格，使其更具视觉吸引力和功能性。以下是几种常见的方法：
基础表格样式
通过CSS可以调整表格的边框、间距和颜色：
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}响应式表格
对于小屏幕设备，可以使用以下方法使表格可滚动：
.table-responsive {
overflow-x: auto;
}悬停效果
添加悬停效果可以提高用户体验：
tr:hover {
background-color: #e9e9e9;
}斑马条纹
交替行颜色可以提高可读性：
tr:nth-child(odd) {
background-color: #f2f2f2;
}固定表头
对于长表格，可以固定表头：
thead {
position: sticky;
top: 0;
}边框样式
自定义边框样式：
table {
border: 2px solid #333;
}
th, td {
border-bottom: 1px solid #ddd;
}单元格对齐
调整单元格内容对齐方式：
td {
vertical-align: middle;
text-align: center;
}表格标题
添加表格标题样式：
caption {
caption-side: bottom;
font-style: italic;
padding: 10px;
}合并边框
确保边框合并：
table {
border-collapse: separate;
border-spacing: 5px;
}这些CSS技巧可以帮助创建美观且功能完善的表格，适应各种设计需求。根据具体项目要求，可以组合使用这些样式或进一步自定义。
