css表格制作
CSS表格制作基础
使用CSS创建表格主要涉及<table>、<tr>、<th>、<td>等HTML标签结合CSS样式控制。
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}响应式表格设计
通过媒体查询实现小屏幕下的表格优化：
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
display: block;
margin-bottom: 15px;
}
table td {
display: block;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}表格美化技巧
添加悬停效果和斑马纹样式：
tr:hover {
background-color: #f5f5f5;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}固定表头实现
对于长表格可固定表头：
.table-container {
height: 300px;
overflow-y: auto;
}
table thead th {
position: sticky;
top: 0;
background-color: #f2f2f2;
}边框样式控制
自定义表格边框样式：
table {
border: 2px solid #333;
border-radius: 5px;
}
th, td {
border-bottom: 1px dashed #aaa;
}单元格合并处理
通过CSS控制单元格合并效果：
td[colspan="2"] {
background-color: #e6f7ff;
text-align: center;
}这些方法提供了从基础到进阶的CSS表格制作技巧，可根据实际需求组合使用或单独应用。
