当每列中没有两个时，如何使用 CSS 选择表中的第二列<td><tr>？

Question

<table>
    <tr>
        <td rowspan="2"><img src="[some image url here]"></td>
        <td>Puppy</td>
    </tr>
    <tr>
        <td>Kitten</td>
    </tr>
<table>

上面的代码将显示一个表格，第一列是一张占据 2 行的图片，第二列由两行组成，每行都有一个(随机(单词。

我想做的是选择表中的第二列，并为每一列提供一个底部边框(我真的不想这样做，但让我们以此为例。

所以经过研究，我找到了nth-child()伪类，所以我能做的是：

table tr td:nth-child(2) {
    border-bottom: 1px solid gray;
}

这将适用于第一行，但在第二行中则

不然，因为第二列是唯一的，因此在第一行中我可以通过执行table tr td:nth-child(2) {}来选择"小狗"一词，在第二行中，我必须使用table tr td:nth-child(1) {}选择它。

所以从本质上讲，有没有人知道在这种情况下不使用 id 或类来选择表的第二列的方法？

Answer 1

对于帖子中的特定表，您可以这样做：

table tr td:not([rowspan]) {
    border-bottom: 1px solid gray;
}

即选择每个没有行跨度属性的TD。

对于更复杂的表(但仍假设第二列是必需的，并且第一列仅包含双行单元格(，您可以这样做：

table tr td:first-child[rowspan] + td, table tr td:first-child:not([rowspan]) {
    border-bottom: 1px solid gray;
}

Answer 2

选项将包括使用

table tr td:last-child {
   border-bottom: 1px solid gray;
}

或者向td添加一个类并设置该类的样式。

我推荐这种类方法，因为它是完全向后兼容的。

Answer 3

对于该特定示例，您可以使用如下所示的属性选择器：

.HTML

<table>
    <tr>
        <td rowspan="2">Kitten</td>
        <td>Puppy</td>
    </tr>
    <tr>
        <td>Kitten</td>
    </tr>
<table>

.CSS

td {
    background: green;
}
td[rowspan] {
    background: none;
}

js小提琴