选择具有行跨度的表的第一列

Posted 2023-03-06

【中文标题】选择具有行跨度的表的第一列

【英文标题】：Select first column of table having rowspan

【发布时间】：2014-12-11 16:45:47

【问题描述】：

我在行的第一个单元格中有一个带有rowspan 的表格。我想选择第一个单元格。当我选择第一个孩子时，在rowspan 之后的某些行中，第一个孩子将成为不在第一行的单元格。

如何只选择表格的第一列？

这是我的 JSFIDDLE http://jsfiddle.net/qw78pcud/

table, th, td 
    border: 1px solid black;
    border-collapse: collapse;

table
    font-size: 18px;
    color: black;

table tr td:first-child
    color: red;
    text-align: center;

<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Bank Name</th>
            <th>SWIFT BIG</th>
            <th>Currency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>USA</td>
            <td>Deutsche Bank Trust Company Americas, New Your</td>
            <td>BKTRUS33</td>
            <td>USD</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>Deutsche Bank AG</td>
            <td>DEUTDEFF</td>
            <td>EUR</td>
        </tr>
        <tr>
            <td rowspan="2">Austria</td>
            <td rowspan="2">Raiffeisen Bank International AG</td>
            <td rowspan="2">RZBAATWW</td>
            <td>EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        
        
        <tr>
            <td rowspan="5">Netherlands</td>
            <td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
            <td rowspan="5">DHBNNL2R</td>
            <td >EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>GBP</td></tr>
        <tr><td>CHF</td></tr>
        <tr><td>JPY</td></tr>
    </tbody>
</table>

我使用了以下选择器，但它在 jsfiddle 显示的 rowspan 之后选择了最后一个孩子

table tr td:first-child
    color: red;
    text-align: center;

注意：我不能为表格元素设置 class 或 id。我需要用 css 访问。

编辑：在这种情况下我们能做什么？ http://jsfiddle.net/qw78pcud/6

table, th, td 
  border: 1px solid black;
  border-collapse: collapse;

table
  font-size: 18px;
  color: black;

table tr td:first-child:not(:only-child) 
  color: red;
  text-align: center;

<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Bank Name</th>
            <th>SWIFT BIG</th>
            <th>Currency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>USA</td>
            <td>Deutsche Bank Trust Company Americas, New Your</td>
            <td>BKTRUS33</td>
            <td>USD</td>
        </tr>
        
        <tr>
            <td>Germany</td>
            <td>Deutsche Bank AG</td>
            <td>DEUTDEFF</td>
            <td>EUR</td>
        </tr>
        
        <tr>
            <td rowspan="2">Austria</td>
            <td rowspan="2">Raiffeisen Bank International AG</td>
            <td rowspan="2">RZBAATWW</td>
            <td>EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        
        <tr>
            <td rowspan="5">Netherlands</td>
            <td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
            <td rowspan="5">DHBNNL2R</td>
            <td >EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>GBP</td></tr>
        <tr><td>CHF</td></tr>
        <tr><td>JPY</td></tr>
        
        <tr>
            <td rowspan="10">Russia</td>
            <td rowspan="3">CB “Garanti Bank – Moscow” (ZAO)</td>
            <td rowspan="3">GABMRUMM</td>
            <td >EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>RUB</td></tr>
        <tr>
            <td rowspan="2">Sberbank of Russia </td>
            <td rowspan="2">SABRRUMM</td>
            <td>USD</td>
        </tr>
        <tr><td>RUB</td></tr>
        <tr>
            <td rowspan="3">JSCB “Yapi Kredi Bank Moscow" (CJSC)</td>
            <td rowspan="3">YKBMRUMM</td>
            <td>EUR</td>
        </tr>
        <tr><td>USD</td></tr>
        <tr><td>RUB</td></tr>
        <tr>
            <td rowspan="2">ZAO Raiffeisenbank </td>
            <td rowspan="2">RZBMRUMM</td>
            <td>USD</td>
        </tr>
        <tr><td>RUB</td></tr>
    </tbody>
</table>

【参考方案1】：

您可以通过使用 :not() 和 :only-child 伪类的组合来实现，如下所示：

Example Here

table tr td:first-child:not(:only-child) 
    color: red;
    text-align: center;

这将排除作为其父母独生子女的单元格 - 行。

【讨论】：

非常感谢，它成功了。想不出嵌套选择器，也不知道 :not()。

如果行中有多个不应该被选中的孩子，我们该怎么办？ jsfiddlejsfiddle.net/qw78pcud/6。我们可以选择有四个孩子的行而不是唯一的孩子（类似于：four-childed）

@Erlan 不幸的是，没有通用 方法可以只选择第一个 visual 单元格（不一定是第一个子 <td>逻辑上的标记）。在这种复杂的情况下，您可以使用<colgroup> 元素将一些样式应用于第一列。但是there are some restrictions.Youcan only controlbackground-color, border, width, visibility属性Example。

嗯，我会试试 colgroup。谢谢