Question

我正在尝试用一些css试图设计一个带有弯角的桌子。但底部边框（白色）角落在底部表格行上。基本上它在视觉上看起来像左下方的尖端溢出圆角。

以下是一个有效的示例： http://cssdeck.com/labs/6mpl631w

有什么建议吗？

.table {
width: 100%;
background-color: #3F3F3F;
color:#EDEDED;
display: block;    
border-width: 1px;
border-style: solid;
padding: 0px;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;

}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {

    padding: 8px 12px;
    }
    .table > thead > tr > th,
    .table > thead > tr > td {
        font-weight: bold;
        font-size: 15px;
    }
    .table > tfoot > tr > th,
    .table > tfoot > tr > td {
        border-top: 1px solid #cccccc;
    }
.table > tbody > tr > th,
.table > tbody > tr > td {
    padding: 8px 12px;

    border-top: 1px solid #e6e6e6;
    }
    .table > tbody > tr:first-child > th,
    .table > tbody > tr:first-child > td {
        border-top-color: #cccccc;
    }
    .table > thead,
    .table > tbody > tr > th,
    .table > tfoot > tr > th {
        text-align: left;
    }

    .table > tbody > tr:nth-child(even) {
        background: #373737;
    }
    .table > tbody > tr.even {
        background: #373737;
    }

    .table > tbody > tr:hover {
        background: #4F4F4F;
    }

Answer 1

添加：

.table {
    overflow: hidden;
}

Demo

如何使用行样式修复border-radius？

1 个答案: