не удалось применить стиль радиуса границы в таблицу

Question

Я пытаюсь создать таблицу с полосой прокрутки в моем угловом приложении.

В приведенном ниже коде я добавляю div с помощью селектора после, чтобы добавить пробел между полосой прокрутки.и контейнер таблицы.

Поскольку родительский элемент таблицы не принимает стиль «padding-right», когда содержимое таблицы переполняется.

Но моя проблема заключается в следующем: когда я применяю border-radiusстиль в таблицу, он не применяется.Может кто-нибудь помочь мне решить эту проблему?

.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

@ Paco Gómez Capó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;
}