Question

我希望替换表格的背景颜色以增加可读性。谷歌搜索后，我找到了我需要的代码。

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

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

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

想法？

Answer 1

内联样式是每个元素，因此您必须将适当的样式注入到每个其他style元素的tr属性中。如果您尚未动态生成这些行，并且无法使用JavaScript注入这些样式，那么您将不得不在每个tr元素上手动应用该属性。

Answer 2

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

<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 3

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

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

在标记中自动插入内联样式。

A working fiddle

Answer 4

这是您正在寻找的东西，希望它有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

我正在通过一系列报告行进行映射：

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

我确实发现我无法使用此代码；不是因为它不起作用。由于有些行被跳过，所以我仍然最终得到彼此相邻的相同颜色的行。如果我发现这一点，我将进行更新。现在，我想我只会使用边框。

-L-

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

5 个答案: