css 如何创建水平条纹表

uurv41yg  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(96)

创建一个垂直条纹表很容易,但是创建一个水平条纹表呢?考虑以下代码:

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
    <td>K</td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
    <td>P</td>
    <td>Q</td>
    <td>R</td>
    <td>S</td>
    <td>T</td>
    <td>U</td>
    <td>V</td>
    <td>W</td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
  </tr>
    <tr> <td>Z</td> <td>Y</td> <td>X</td> <td>W</td> <td>V</td> <td>U</td> <td>T</td> <td>S</td> <td>R</td> <td>Q</td> <td>P</td> <td>O</td> <td>N</td> <td>M</td> <td>L</td> <td>K</td> <td>J</td> <td>I</td> <td>H</td> <td>G</td> <td>F</td> <td>E</td> <td>D</td> <td>C</td> <td>B</td> <td>A</td>
  </tr>
</table>

什么样的css设置可以帮助实现这一点。

ctehm74n

ctehm74n1#

只需要使用:nth-child选择器,但是在<td>元素上,而不是<tr>

tr td:nth-child(odd) {
  background: yellow;
}
tr td:nth-child(even) {
  background: red;
}
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
        <td>K</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
        <td>P</td>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
        <td>U</td>
        <td>V</td>
        <td>W</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
    </tr>
        <tr> <td>Z</td> <td>Y</td> <td>X</td> <td>W</td> <td>V</td> <td>U</td> <td>T</td> <td>S</td> <td>R</td> <td>Q</td> <td>P</td> <td>O</td> <td>N</td> <td>M</td> <td>L</td> <td>K</td> <td>J</td> <td>I</td> <td>H</td> <td>G</td> <td>F</td> <td>E</td> <td>D</td> <td>C</td> <td>B</td> <td>A</td>
    </tr>
</table>

相关问题