Question

我正在尝试制作一个包含border-radius的表格。由于我在表的第一行和最后一行中有不同的设置（tr：first和last-child），我在CSS文件中单独创建了它们。每个设置都是正确的，除了border-radius之外。

代码如下：

.tables
    {
        letter-spacing: 0.10em;
        border-collapse: collapse;
        width: 100%;
        color: #919499;
        background-color: #2f333b;
        table-layout: fixed;
        font-size: 14px;
    }

    .tables tr:first-child 
    {
        letter-spacing: 0.15em;
        border-collapse: collapse;
        font-size: 18px;
        background-color: #e97770;
        border-top-left-radius: 0.5em !important;
        border-top-right-radius: 0.5em !important;
        -webkit-border-top-right-radius: 0.5em !important;
        -webkit-border-top-left-radius: 0.5em !important;
        -moz-border-top-right-radius: 0.5em !important;
        -moz-border-top-left-radius: 0.5em !important;
        width: 100%;
        table-layout: fixed;
    }

    .tables tr:last-child
    {
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
        -webkit-border-bottom-right-radius: 0.5em !important;
        -webkit-border-bottom-left-radius: 0.5em !important;
        -moz-border-bottom-right-radius: 0.5em !important;
        -moz-border-bottom-left-radius: 0.5em !important;
    }

任何想法如何实现这一目标？

Answer 1

您无法设置TD所需的TR元素的样式。所以你需要使用这样的东西：

.tables tr:first-child td:first-child{
   /* top left radius styles here */
}
.tables tr:first-child td:last-child{
   /* top right radius styles here */
}
.tables tr:last-child td:first-child{
   /* bottom left radius styles here */
}
.tables tr:last-child td:last-child{
   /* bottom right radius styles here */
}

希望它有所帮助。

CSS表格first-child和last-child border-radius不起作用

1 个答案: