[分享]css中如何改变表格颜色

发布于 2024-11-11 19:27:50

在CSS中改变表格颜色的方法非常简单，只需要使用属性选择器选择需要改变颜色的单元格或单元格集合，然后设置它们的背景颜色即可。/ 单独一个单元格的颜色 / tdcell1 { backgroundcol...

在CSS中改变表格颜色的方法非常简单，只需要使用属性选择器选择需要改变颜色的单元格或单元格集合，然后设置它们的背景颜色即可。

/* 单独一个单元格的颜色 */
td#cell1 {
  background-color: red;
}

/* 单元格集合的颜色 */
tr:nth-child(even) td {
  background-color: blue;
}

以上代码中，td#cell1使用了ID选择器选择一个单独的单元格，并将其背景颜色设置为红色。而tr:nth-child(even) td则使用了属性选择器选择所有偶数行的单元格集合，并将它们的背景颜色设置为蓝色。下面是一个完整的示例代码，用于展示如何同时使用两种选择器改变表格颜色：

<html>
  <head>
    <style>
      /* 单独一个单元格的颜色 */
      td#cell1 {
        background-color: red;
      }

      /* 单元格集合的颜色 */
      tr:nth-child(even) td {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td id="cell1">红色的单元格</td>
        <td>蓝色的单元格</td>
      </tr>
      <tr>
        <td>蓝色的单元格</td>
        <td>红色的单元格</td>
      </tr>
      <tr>
        <td>红色的单元格</td>
        <td>蓝色的单元格</td>
      </tr>
    </table>
  </body>
</html>

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖