css - 具有内联样式 CSS 的表格上的备用行颜色

Question

我想改变表格的背景颜色以增加可读性。谷歌搜索了一下后，我找到了我需要的代码。

tr:nth-child(even) {
    background-color: #000000;
}

我的解决方案中的问题是，我无法访问 head 标签，我想用内联样式 CSS 来实现它，但它不起作用。

<tr style="nth-child(even) background-color: #000000;">

想法？

Answer 1

我也有类似的情况。我通过在我的桌子之前放置一个样式部分来解决它：

<style>
    table#some_table_id tr:nth-child(even) { background-color:#dddddd; }
</style>
<table id="some_table_id">
    <!-- table markup removed -->
</table>

不是最优雅的解决方案，但它适用于我（在 Google Chrome 29.0.x 中）。

Answer 2

内联样式是每个元素的，因此您必须将适当的样式注入到每个其他元素的style属性中。tr如果您还没有动态生成这些行，并且您不能使用 JavaScript 来注入这些样式，那么您将不得不手动将属性应用于每个tr元素。

Answer 3

除了 BoltClock 答案，如果你可以使用 jQuery，你可以尝试这样的事情：

$('tr:nth-child(even)').css("background", "red");

这会在您的标记中自动插入内联样式。

一个工作小提琴

Answer 4

所以，我实际上是在使用 React ......我想要一个表格来显示交替颜色的行。该代码使用了很多内联样式，并且 css 存在一些有趣的语法差异，但我想我会分享一段代码。

我正在通过报告的一组行进行映射：

<tbody> <tr key={line.number} style={(line.number % 2) ? { backgroundColor: 'someColor' } : null}> ...code table column data here... </tr> </tbody>

我确实发现我无法使用此代码；不是因为它不起作用。由于有些行被跳过，我仍然会得到相邻的相同颜色的行。如果我碰巧弄清楚了，我会更新。现在，我想我只会使用边框。

-L-

Answer 5

这就是你要找的，希望对你有帮助。

    tr:nth-child(even) {
        background-color: black;
        color: white;
    }

    tr:nth-child(odd) {
        background-color: #0000335f;
    }

    <table class="table">
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>text1</td>
          <td>text2</td>
          <td>text3</td>
          <td>text4</td>
          <td>text5</td>
        </tr>
      </tbody>
    </table>