HTML表格的斑马样式CSS如何？答案

【问题标题】：How have a zebra style CSS for HTML table?HTML表格的斑马样式CSS如何？
【发布时间】：2015-02-17 23:35:44
【问题描述】：

我想在我的 PHP 表中为每一行创建一个 Zebra 样式。现在有了上面的 CSS 代码：

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

我有 Zebra 样式，但仅适用于不可取的每一列。关于如何解决的任何想法？

【问题讨论】：

为什么不用 tr 而不是 td？
我试过了。但它不起作用
你也可以做两个 css 类并在每一行交替使用它们。
也出于好奇，你用的是哪个浏览器？
目前，我使用 Chrome

标签： php html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，但这仅适用于每一列，不适用于每一行
@ather0s 你对我的答案的编辑有一些进步吗？如果您解决了问题，请不要忘记检查是否正确
你能用你的 html 表格编辑你的帖子吗？如果可能的话，一张图片显示你想要什么

【解决方案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>

祝你好运！

【讨论】：