css制作表格
使用CSS制作表格的方法
基本表格结构
HTML表格由<table>、<tr>（行）、<th>（表头）和<td>（单元格）组成。基本结构如下：
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>基础样式调整
通过CSS控制表格边框、间距和对齐方式：
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 表格宽度 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 内边距 */
text-align: left; /* 文本对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景色 */
}高级样式设计
添加悬停效果和斑马纹（交替行颜色）：
tr:hover {
background-color: #f5f5f5; /* 悬停行高亮 */
}
tr:nth-child(even) {
background-color: #f9f9f9; /* 偶数行背景 */
}响应式表格
针对小屏幕设备添加横向滚动：
div.table-container {
overflow-x: auto; /* 横向溢出时滚动 */
}边框样式自定义
实现双线边框或圆角效果：
table {
border: 2px double #333; /* 双线边框 */
}
td:first-child {
border-left: none; /* 首列去左边框 */
}间距与对齐优化
调整单元格内容的垂直对齐方式：
td {
vertical-align: middle; /* 垂直居中 */
padding: 12px 15px; /* 自定义内边距 */
}表头固定
实现滚动时表头固定的效果（需配合JavaScript）：
thead th {
position: sticky;
top: 0;
z-index: 10;
}实际应用中可根据需求组合这些样式，通过调整颜色、边框和间距等属性创建符合设计需求的表格。对于复杂交互，可能需要结合JavaScript实现动态效果。
