css表格制作表格
使用HTML和CSS创建表格
HTML的<table>标签用于创建表格结构，CSS用于美化表格样式。
HTML基础结构：
<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%;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}响应式表格设计
当屏幕宽度不足时，可通过以下方式使表格可横向滚动：
div.table-container {
overflow-x: auto;
}
@media screen and (max-width: 600px) {
table {
width: auto;
}
}高级样式技巧
悬停高亮效果：
tr:hover {
background-color: #e6f7ff;
}固定表头：
thead {
position: sticky;
top: 0;
}斑马条纹：
tbody tr:nth-child(odd) {
background-color: #fafafa;
}边框样式自定义
创建双线边框效果：
table {
border: 3px double #333;
}
th, td {
border: 1px solid #999;
}单元格合并示例
HTML实现跨列和跨行：
<tr>
<td colspan="2">合并的单元格</td>
</tr>
<tr>
<td rowspan="2">纵向合并</td>
<td>普通单元格</td>
</tr>表格布局优化建议
- 使用
text-overflow: ellipsis处理过长文本 - 为数字内容设置
text-align: right - 重要数据可使用
font-weight: bold突出显示 - 通过
padding调整单元格内边距改善可读性
浏览器兼容性注意事项
- 旧版IE可能需要特殊hack处理边框
- 移动端需测试触摸滚动体验
- 打印样式建议使用
@media print单独设置
