bootsrap с округленной таблицей-italia

#html #css #html-table #rounded-corners

#HTML #css #html-таблица #закругленные углы

Вопрос:

я использую 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>
 

Это результат

img

Почему это не работает?

Спасибо тем, кто может мне помочь, и извините за мой плохой английский.

Ответ №1:

Добавить overflow:hidden CSS в таблицу или просто добавить overflow-hidden в table тег.