用CSS 方式设置 table 样式

在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。

效果图

HTML 结构

首先，我们定义一个基本的HTML表格结构：

<table class="styled-table"><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>34</td><td>上海</td></tr><!-- 更多行 --></tbody>
</table>

CSS 样式

接下来，我们编写CSS来设置这个表格的样式。这里，我将展示一些基本但实用的样式设置，包括边框、背景色、文字对齐等。

.styled-table {border-collapse: collapse;margin: 25px 0;font-size: 0.9em;font-family: sans-serif;min-width: 400px;box-shadow: 0 0 20px rgba(0,0,0,0.15);
}.styled-table thead tr {background-color: #009879;color: #ffffff;text-align: left;
}.styled-table th,
.styled-table td {padding: 12px 15px;
}.styled-table tbody tr {border-bottom: 1px solid #dddddd;
}.styled-table tbody tr:nth-of-type(even) {background-color: #f3f3f3;
}.styled-table tbody tr:last-of-type {border-bottom: 2px solid #009879;
}.styled-table tbody tr.active-row {font-weight: bold;color: #009879;
}/* 可选：悬停效果 */
.styled-table tbody tr:hover {background-color: #f1f1f1;
}

解释

• border-collapse: collapse;：这个属性将表格的边框合并为一个单一的边框，而不是每个单元格都有边框。
• margin、font-size、font-family：这些属性用于设置表格的外边距、字体大小和字体族。
• box-shadow：为表格添加阴影效果，使其更加突出。
• thead 和 tbody 的样式：分别为表头和表体设置不同的背景色和文本颜色，增加可读性。
• th 和 td 的 padding：为表头和表单元格添加内边距，让内容看起来更加舒适。
• 交替行背景色：使用:nth-of-type(even)选择器为表格的偶数行设置不同的背景色，增强视觉区分。
• 悬停效果：通过:hover伪类为表格行添加鼠标悬停时的背景色变化，提升用户体验。