如何正确应用边界半径到表格？

Question

我长期以来一直使用简单的方法将border-radius应用于表，它正在查找每个角单元并将该角的半径应用于每个单元格，如下所示：

table > :first-child > tr:first-of-type > :first-child { border-radius: 5px 0 0 0 }
table > :first-child > tr:first-of-type > :last-child { border-radius: 0 5px 0 0 }
table > :last-child > tr:last-of-type > :first-child { border-radius: 0 0 0 5px }
table > :last-child > tr:last-of-type > :last-child { border-radius: 0 0 5px 0 }

现在，这对于你的平均表来说都很好用，这是一个完美的行和列网格，没有随机的行跨度或列跨度。但是，当你开始包括那些时会发生什么？它搞砸了一切。举例来说，这个表中最后一行只有一个单元格，其中下三行是从前一行开始的：

<table>
    <tr>
        <td>Item 1</td>
        <td rowspan="2">Description for both Item 1 and Item 2</td>
        <td rowspan="2">Option for Items 1 & 2</td>
        <td rowspan="2">Option for Items 1 & 2</td>
    </tr>
    <tr>
        <td>Item 2</td>
    </tr>
</table>

这里发生的是右下角边界半径应用于单个“Item 2”单元格，因为它既是最后一行中的第一个和最后一个子节点，也是右下角最终压倒它。

如果它是一个列跨度问题，这很容易解决，因为我可以在:only-child的CSS下面添加另一行，它将左下半径和右下半径应用于该单一项目。但是什么时候这是一个什么时候扔掉了？

如何计算行跨度并将适当的border-radius应用于表格的每个角落？

Answer 1

您可以尝试使用属性选择器。也许是这样的

table > :last-child > tr:last-of-type > :only-child { border-radius: 0 0 0 5px }
table > :first-child > tr:first-of-type > :last-child[rowspan="2"]{border-radius: 0 5px 5px 0}

如果它跨越两条线，则会使第一行的最后td的两个右角成为圆形。

DEMO

通过这种方式，您可以判断rowspan是否应用于td，但是对于更复杂和更改的表结构，结构选择器可能不是最佳解决方案，您可能希望使用类选择器