[分享]css写table的样式

发布于 2024-11-11 15:38:12

CSS是一种基于样式规则（层叠样式表，Cascading Style Sheets）的标记语言，用来描述HTML文档的表现方式。其中，处理表格（table）样式效果是一项非常重要的功能，CSS提供了丰...

CSS是一种基于样式规则（层叠样式表，Cascading Style Sheets）的标记语言，用来描述HTML文档的表现方式。其中，处理表格（table）样式效果是一项非常重要的功能，CSS提供了丰富的样式表达方式满足用户不同的需求。

下面是基于CSS写table的样式介绍：

/*设置表格边框*/
table {
    border: 1px solid #ccc;
    border-collapse: collapse;
}

/*设置表头样式*/
th {
    background-color: #f2f2f2;
    text-align: left;
    padding: 10px;
}

/*设置表格单元格样式*/
td {
    padding: 8px;
}

/*设置表格隔行颜色*/
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/*设置表格鼠标悬停样式*/
tr:hover {
    background-color: #ddd;
}

/*设置表格字体样式*/
table td, th {
    font-size: 14px;
    font-family: Arial, sans-serif;
}

通过以上的样式设置，表格将会更加美观，易读，好维护。另外，CSS样式表也可以作为独立文件存在。在HTML文档内，可以通过以下方式引用CSS文件：

<head>
    <link rel="stylesheet" type="text/css" href="table.css">
</head>

通过这种方式，HTML文档和样式表可以分离，实现内容和样式分离管理，减少代码复杂度和工作量，建议尽量应用该方法进行开发。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖