用CSS 方式设置 table 样式

芭拉拉小魔仙2024-09-12 22:55

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

效果图

HTML 结构

首先，我们定义一个基本的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来设置这个表格的样式。这里，我将展示一些基本但实用的样式设置，包括边框、背景色、文字对齐等。

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伪类为表格行添加鼠标悬停时的背景色变化，提升用户体验。