基础样式设置
使用CSS为表格添加基本样式时，可通过以下方式实现：
/* 表格整体样式 */
table {
width: 100%;
border-collapse: collapse;
font-family: '微软雅黑', sans-serif;
}
- 📌 边框设置：
border: 1px solid #ccc;可统一设置表格边框 - 📌 悬停效果：
tr:hover { background-color: #f5f5f5; }增强交互体验 - 📌 响应式布局：使用
@media查询适配移动端
高级美化技巧
通过CSS伪类和布局属性可实现更复杂的样式效果：
/* 表格行悬停效果 */
tr:hover {
background-color: #e0f7ff;
transition: background-color 0.3s ease;
}
- 🧠 斑马纹效果：交替设置
background-color实现 - 🧠 圆角边框：
border-radius: 5px;增添现代感 - 🧠 阴影效果：
box-shadow: 0 2px 8px rgba(0,0,0,0.1);提升层次感
实用示例
以下为完整样式示例代码：
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
建议搭配使用：