#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>
Это результат
Почему это не работает?
Спасибо тем, кто может мне помочь, и извините за мой плохой английский.
Ответ №1:
Добавить overflow:hidden
CSS
в таблицу или просто добавить overflow-hidden
в table
тег.