直接子项的备用表行颜色

时间:2016-04-12 10:21:12

标签: html css html-table

我想用不同的颜色为表格的行着色,所以我正在使用这个

table#news tr:nth-child(even) {      
  background-color: red;
}
table#news tr:nth-child(odd) {
  background-color: green;
}

它适用于这种结构

<table id="news">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>

但现在我使用这种表。

<table id="news">
  <tr>
    <td>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
    </td>
  </tr>
</table>

该样式也适用于行内的行。

如何继续仅为<tr>的第一个级别应用备用颜色?

1 个答案:

答案 0 :(得分:1)

试试这个:

table#news > tr:nth-child(even) {      
  background-color: red;
}
table#news > tr:nth-child(odd) {
  background-color: green;
}

>表示#news必须是tr的直接父级。

为了实现这一点,您还必须添加tbody选择器。

table#news tbody > tr:nth-child(even) {      
  background-color: red;
}
table#news tbody > tr:nth-child(odd) {
  background-color: green;
}

tbody元素由浏览器自动添加。

无论如何,上面的仍然无法工作,因为您无法在tr内嵌套td。您要做的是在td内创建一个完整的新表。请参阅:Html table tr inside td

运行下面的代码段并查看源代码。

&#13;
&#13;
table.news > tbody > tr:nth-child(even) {
  background-color: red;
}
table.news > tbody > tr:nth-child(odd) {
  background-color: green;
}
&#13;
<table class="news">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

<table class="news">
  <tr>
    <td>
      Test
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
      <tr>
        <td>Row 3</td>
      </tr>
    </td>
  </tr>
</table>

<h1> Fixed </h1>

<table class="news">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

<table class="news">
  <tr>
    <td>
      Test
      <table>
        <tr>
          <td>Row 1</td>
        </tr>
        <tr>
          <td>Row 2</td>
        </tr>
        <tr>
          <td>Row 3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;