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:hover {
background-color: #f5f5f5;
}斑马纹表格
使用:nth-child()选择器创建交替行颜色：
tr:nth-child(even) {
background-color: #f9f9f9;
}响应式表格
针对小屏幕设备的响应式处理：
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
display: block;
margin-bottom: 10px;
border: 1px solid #ddd;
}
table td {
display: block;
text-align: right;
border-bottom: 1px dotted #ccc;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}高级样式示例
创建更美观的表格样式：
table {
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
overflow: hidden;
}
th {
background-color: #4CAF50;
color: white;
}
td {
transition: all 0.3s;
}表格布局控制
使用table-layout属性控制表格布局：
table {
table-layout: fixed; /* 固定布局 */
/* 或 auto; 自动布局 */
}单元格合并
通过HTML属性实现单元格合并：
<td colspan="2">跨两列</td>
<td rowspan="3">跨三行</td>这些方法可以根据实际需求组合使用，创建各种风格的表格布局。
