Question

我想在我的PHP表格中为每一行制作Zebra样式。现在使用上面的CSS代码：

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

我有Zebra风格，但只针对每个不理想的列。有关如何弄明白的想法？

Answer 1

如下所示，您可以使用nth-of-type选择器：

/* 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>

Answer 2

你需要为你的偶数行添加这样的东西

table.imagetable tr:nth-child(even) 
{
  background-color:#fff;
}

Answer 3

你必须写在你的桌子上：

<tr class="<?=($c++%2==1) ? 'odd' : 'even' ?>" style="border:1">

然后在你的CSS上添加：

<style type="text/css">
.even { background-color:#FFFFFF } 
.odd { background-color:#EAEAEA }
</style>

祝你好运！

如何为HTML表格提供斑马风格的CSS？

3 个答案: