回合 table bootstrap-italia

Question

我正在为我的网站使用 bootsrap-italia（bootsrap 4 扩展）。我对表格有疑问。我无法设置圆形边框。

我试图将此代码添加到我的 CSS

table
{
     border: 10px solid #c3c3c3 !important;
     border-radius: 50px !important;
}
table tr:last-child td:first-child {
    border-bottom-left-radius: 10px !important;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px !important;
}

这是我的HTML代码

 <table class="table table-striped table-bordered  mb-5">
            <thead class="bg-success" style="color:white;">
                <tr>
                    <th scope="col">GEN-SPE-AUT</th>
                    <th scope="col">SPECIE</th>
                    <th scope="col">FAMIGLIA</th>
                    <th scope="col" class=" w-5"></th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach ($specie as $sp) {
                    ?>
                    <tr>
                        <td><?= $sp['GEN_SPE_AUT'] ?></td>
                        <td><?= $sp['SPECIE'] ?></td>
                        <td><?= $sp['FAMIGLIA'] ?></td>
                        <td class="text-center w-5"><a class="" href="<?= base_url() . 'index/view_rilevamento_specie/' . $sp['CODPIGN'] ?>" ><svg class="icon icon-sm icon-black"><use xlink:href="<?= base_url() ?>frontend/assets/svg/sprite.svg#it-password-visible"></use></svg></a></td>
                    </tr>
                <?php } ?>
            </tbody>
        </table>

这是结果

为什么不起作用？

感谢那些能帮助我的人，抱歉我的英语不好。

Answer 1

将 overflow:hidden CSS 添加到 table 或简单地将 overflow-hidden 添加到 table 标签。

回合 table bootstrap-italia

Rounded table bootsrap-italia

html

css

html-table

rounded-corners