如何用css选择非标题单元格

时间：2016-05-02 18:12:08

标签： html css

如下面的表格包含某些行标题的rowspan单元格，如何在不更改HTML标记的情况下仅使用css选择所有“行内容”单元格？

生成表时，rowspan标题单元格可能位于不同的行上，或者可能根本没有行数，因此css不能硬编码到特定的行号。

这只能用css吗？

    table {
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px solid black;
    }
<table>
  <tbody>
    <tr>
      <th>Column Header 1</th>
      <th>Column Header 2</th>
      <th>Column Header 3</th>
      <th>Column Header 4</th>
    </tr>
    <tr>
      <td>Row Header 1</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 2</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 4</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 5</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 6</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
  </tbody>
</table>

3 个答案:

答案 0 :(得分：2)

您的标记在语义上不正确：

  1. 使用<th>作为标题单元格
  2. 将<td>用于数据单元格
  3. 然后，您可以使用td CSS选择器选择数据单元格。

    4. table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
}
td {
  background: yellow;
}
    <table>
  <tbody>
    <tr>
      <th>Column Header 1</th>
      <th>Column Header 2</th>
      <th>Column Header 3</th>
      <th>Column Header 4</th>
    </tr>
    <tr>
      <th>Row Header 1</th>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <th rowspan="2">Row Header 2</th>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <th>Row Header 4</th>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <th rowspan="2">Row Header 5</th>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <th>Row Header 6</th>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：0)

您可以使用属性选择器：

＆＃13;
＆＃13; 
table {
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px solid black;
    }

td[rowspan] {
  background: lightBlue;
}
＆＃13; 
<table>
  <tbody>
    <tr>
      <th>Column Header 1</th>
      <th>Column Header 2</th>
      <th>Column Header 3</th>
      <th>Column Header 4</th>
    </tr>
    <tr>
      <td>Row Header 1</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 2</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 4</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 5</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 6</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

或not选择器和属性选择器的组合，具体取决于您要尝试的内容：

＆＃13;
＆＃13; 
table {
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px solid black;
    }

td:not([rowspan]) {
  background: lightBlue;
}
＆＃13; 
<table>
  <tbody>
    <tr>
      <th>Column Header 1</th>
      <th>Column Header 2</th>
      <th>Column Header 3</th>
      <th>Column Header 4</th>
    </tr>
    <tr>
      <td>Row Header 1</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 2</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 4</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td rowspan="2">Row Header 5</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
    <tr>
      <td>Row Header 6</td>
      <td>Row Content 1</td>
      <td>Row Content 2</td>
      <td>Row Content 3</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

不是查看单个单元格，尝试在内容单元格之间找到一致性，只允许您选择它们​​或者标题单元格之间的一致性，这样可以让您选择除它们之外的所有单元格，我们应该改为查看因为，当我们这样做时，很明显包含标题单元格的所有行总共有4个单元格，而那些不仅有3个单元格的行。

有了这些知识，我们只能通过组合negation和:nth-last-child pseudo-classes来定位内容单元格，以选择每行中第4个最后一个单元格，例如： 

td:not(:nth-last-child(4)){}
相关问题
最新问题