用CSS 方式设置 table 样式

在现代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;:这个属性将表格的边框合并为一个单一的边框,而不是每个单元格都有边框。
  • marginfont-sizefont-family:这些属性用于设置表格的外边距、字体大小和字体族。
  • box-shadow:为表格添加阴影效果,使其更加突出。
  • theadtbody 的样式:分别为表头和表体设置不同的背景色和文本颜色,增加可读性。
  • thtdpadding:为表头和表单元格添加内边距,让内容看起来更加舒适。
  • 交替行背景色 :使用:nth-of-type(even)选择器为表格的偶数行设置不同的背景色,增强视觉区分。
  • 悬停效果 :通过:hover伪类为表格行添加鼠标悬停时的背景色变化,提升用户体验。
相关推荐
sasaraku.32 分钟前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw54 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app