3

I've long used the simple method for applying border-radius to tables, which is looking for each corner cell and applying the radius for that corner to each of those cells, like so:

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 }

Now, this works all fine and dandy for your average table which is a perfect grid of rows and columns with no random row-spans or column-spans. But, what happens when you start including those? It messes everything up. Take, for example, this table where the last row only has a single cell in it, where the next three are spanned from the previous row:

<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>

What happens here is that the bottom-right border radius get applied to that single "Item 2" cell because it's both the first and last child in the last row, and the bottom-right corner ends up overriding it.

Table border radius

This would be easy to fix if it were a column-span issue, as I could just add another line below that CSS for :only-child which would apply both the bottom-left and bottom-right radius to that single item. But what about when it's a row-span that's throwing it off?

How can I account for row-spans and apply the appropriate border-radius to each corner of a table?

4

1 回答 1

0

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

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如果它跨越两条线，则使第一行的最后一个右角都变圆。

演示

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

于 2013-05-29T18:29:42.380 回答