css表格排版样式

发布时间:2025-12-10 12:59:33 浏览次数:2

CSS表格排版样式在网页设计中是很重要的一部分,可以让网站的内容更加有序、美观。本文将介绍几种常见的CSS表格排版样式。

table {border-collapse: collapse; /* 合并表格边框 */width: 100%; /* 表格宽度为100% */}th, td {padding: 8px; /* 单元格内边距为8px */text-align: left; /* 单元格内容左对齐 */border-bottom: 1px solid #ddd; /* 单元格底边框为1px实线 */}th {background-color: #f2f2f2; /* 表头背景色为灰色 */}tr:hover {background-color: #f5f5f5; /* 鼠标悬停时行背景色为浅灰色 */}

上述代码中,table样式定义了表格的基本属性,如边框合并、宽度等,thtd样式定义了单元格的内边距、文本对齐和底边框样式,th样式还定义了表头的背景色。最后tr:hover样式实现了鼠标悬停时行的背景色变化。

除了上述基本样式外,还有许多其他的CSS表格排版样式,如固定表头表格、带斑马线的表格、带滚动条的表格等,读者可以自行学习探究。

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477