logo标签列表

选择具有 rowspan 的表的第一列

htmlcsscss-selectorshtml-table
5

我有一张表格，其中第一行的单元格有 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所显示的那样。
table tr td:first-child{
    color: red;
    text-align: center;
}

注意：我不能给表格元素设置类或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个回答
7
你可以通过使用 :not() 和 :only-child 伪类的组合来实现这一点，示例如下：

此处为例子

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

这将排除那些是其父元素唯一子元素（即行）的单元格。
非常感谢，它起作用了。我想不到嵌套选择器，也不知道:not()。 - Erlan
1
如果有多个子元素不应被选中，我们该怎么办？jsfiddle http://jsfiddle.net/qw78pcud/6/. 我们能否选择具有四个子元素的行而不仅仅是单个子元素（类似于：four-childed）？ - Erlan
1
@Erlan 不幸的是，没有通用的方法可以仅选择第一个可视单元格（它们不一定是标记中逻辑上的第一个子<td>）。在这种复杂情况下，您可以使用<colgroup>元素来对第一列应用一些样式。但是，有一些限制。您只能控制background-color、border、width、visibility属性 **示例**。 - Hashem Qolami
1
嗯，我会尝试使用colgroup。谢谢。 - Erlan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接