网站建设知识
css好看的 table样式
2025-07-13 16:56  点击:0

在网页设计中,表格是一个必不可少的元素。然而,普通的表格往往没有美感,阅读起来也不够方便。这个时候,我们可以使用CSS来优化表格的样式使其更加好看。

以下是一个简单的table样式代码:

table {width: 100%;border-collapse: collapse;border: 1px solid #ddd;}th, td {padding: 10px;text-align: left;}th {background-color: #4286f4;color: #fff;}tr:nth-child(even) {background-color: #f2f2f2;}

上述代码实现了以下几个功能:

  • 设置表格宽度为100%;
  • 设置表格边框折叠为collapse;
  • 设置表格边框为1像素,颜色为#ddd;
  • 设置表头和表格单元格内边距为10像素;
  • 设置表头背景颜色为#4286f4,字体颜色为#fff;
  • 设置奇数行背景颜色为#f2f2f2。

这些简单的代码可以使表格看起来更加美观,易于阅读。当然,你还可以根据自己的需求添加更多的CSS属性来优化表格样式。