无法将边框半径样式应用于表格

Question

我正在尝试创建一个在我的角度应用程序中具有滚动条的表。

在下面的代码中，我将在after选择器的帮助下添加一个div，以在滚动条和表容器之间添加一个空格。

因为当表内容溢出时，表父元素不采用'padding-right'样式。

但是我的问题是：当我在表格中应用边框半径样式时，它不会应用。谁能帮我解决这个问题？

.tableContainer {
    padding: 20px;
    background: #e7e7e7;
    width: 1340px;
    height: 200px;
    overflow: scroll;
    margin-left: 18px;
}

.tableContainer>table  {
    border-radius:20px;
    position: relative;
    width: 100%;
}
.tableContainer>table th {
    padding: 10px;
    color: #fff;
    text-align: center;
}
.tableContainer>table td {
    border: 3px solid #e1e1e1;
    padding: 10px;
    text-align: center;
}
.tableContainer table::after  {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    right: -20px;
    top:0px;
}

<div class="tableContainer">
    <table>
        <!--<thead class="bg-dark">
            <tr>
                <th></th>
                <th *ngFor="let thead of tableHeader">{{thead}}</th>
            </tr>
        </thead>-->
        <tbody>
            <tr class="bg-dark">
                <th></th>
                <th *ngFor="let thead of tableHeader">{{thead}}</th>
            </tr>
            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">
                <td>{{key}}</td>
                <td *ngFor="let data of tableColumn[key]">
                    {{data}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

@PacoGómezCapón-我还将在overflow: hidden上设置.tableContainer>table 否则，内容将超出圆角边框。查看图片

Answer 2

表格的边框半径实现得很好，问题在于您看不到它，因为您没有为表格设置边框。 该代码将是这样的：

.tableContainer {
    padding: 20px;
    background: #e7e7e7;
    width: 1340px;
    height: 200px;
    overflow: scroll;
    margin-left: 18px;
}

.tableContainer>table  {
    border-radius:20px;
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid;
}
.tableContainer>table th {
    padding: 10px;
    color: #fff;
    text-align: center;
}
.tableContainer>table td {
    border: 3px solid #e1e1e1;
    padding: 10px;
    text-align: center;
}
.tableContainer table::after  {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    right: -20px;
    top:0px;
}