css - 未能将边框半径样式应用于表格

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>

标签： css

Answer 1

@Paco Gómez Capón - 我也会设置overflow: hidden，.tableContainer>table 否则内容将超出圆形边框。看图片