如何有HTML表的斑马样式CSS？ [英] How have a zebra style CSS for HTML table?

问题描述

我想在我的PHP表上为每一行制作一个斑马样式。现在有了上面的CSS代码，我有：

I would like to make a Zebra style on my PHP table for each row. Now with the above CSS code that i have:

table.imagetable td:nth-child(odd) 
{
  background-color:#ccc;
}

我有斑马风格，但只有每一列都是不可取的。任何想法如何计算出来？

I have Zebra style but only for each column which is not desirable. Any ideas of how to figure it out?

推荐答案

如下所示，您可以使用第n种类型选择器：

As shown below, you can use the nth-of-type selector:

/* Changes the background color of every odd row to light gray */
table tr:nth-of-type(odd) {
  background-color: #ccc;
}

/* Changes the weight of each td cell within each odd row to bold */
table tr:nth-of-type(odd) td {
  font-weight: bold;
}

/* Collapses table borders to make the table appear continuous */
table {
  border-collapse: collapse;
}

/* Spaces out each table cell */
table td {
  padding: 1em;
}

/* Changes the background color of every odd row to light gray */
table tr:nth-of-type(odd) {
  background-color: #ccc;
}

/* Changes the weight of each td cell within each odd row to bold */
table tr:nth-of-type(odd) td {
  font-weight: bold;
}

/* Collapses table borders to make the table appear continuous */
table {
  border-collapse: collapse;
}

/* Spaces out each table cell */
table td {
  padding: 1em;
}

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

这篇关于如何有HTML表的斑马样式CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！