当前位置: 首页 > 阅读正文

纯css实现双色表格

2021年9月13日   85 次   720字数

纯css就可以实现双色表格,无需js,这里使用的是nth-child伪类选择器

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

选择器ChromeIEFirefoxSafariOpera
:nth-child()4.09.03.53.29.6

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

n 可以是数字、关键词或公式。

实现双色表格

这里使用 odd关键字表示奇数,even表示偶数

<!doctype html>

<body>

<table>
  <thead>
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>男</td>
    </tr>

    <tr>
      <td>2</td>
      <td>李四</td>
      <td>男</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>男</td>
    </tr>
    <tr>
      <td>4</td>
      <td>赵六</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
<style>
    tbody tr:nth-child(odd){  // 奇数
        background-color: yellow;
    }
    tbody tr:nth-child(even){ // 偶数
        background-color: red;
    }
</style>

</body>

本篇完,还有疑问?留下评论吧

发表评论