Search code examples
htmlcsshtml-tablerounded-corners

Rounded table bootsrap-italia

i am using bootsrap-italia (bootsrap 4 extension) for my website. I have a problem with the tables. I cannot set the Round bordere.

I tried to add this code to my 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;
}

This is my HTML code

 <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>

This is the result

img

Why doesn't it work?

Thanks to those who can help me and sorry for my bad English.

Solution

  • Add overflow:hidden CSS to table or simply add overflow-hidden to the table tag.