html/css 表格中的边框半径

Question

我想在我的桌子的外边框上有一个圆形边框。 但是，我正在尝试的任何事情似乎都没有奏效。 任何建议将不胜感激。 更奇怪的是，当我在 stackoverflow 中“运行”时，代码似乎可以工作，但在我的实际源代码上却不起作用。 我不确定这是不是因为我使用 Hugo 作为平台？ 我所有的其他边界半径功能似乎都有效......

相关代码

 .table-bor { border: solid; border-width: 1px; border-color: $theme; padding: 50px 30px; margin-top: 50px; margin-bottom: 50px; margin-left: 30px; border-radius: 10px; } /* not relevant */ .title-borrow { text-align: right; color: $theme; font-size: 30pt; } /* I HAVE ALSO TRIED THE FOLLOWING BUT IT DID NOT WORK */ td:first-of-type { border-top-left-radius: 10px; } th:last-of-type { border-top-right-radius: 10px; } tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; } tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; } /* AND IN THE ACTUAL HTML CODE, I HAVE TRIED THE FOLLOWING INDIVIDUALLY */ <table style="border-radius: 10px !important"> <table style="border-radius: 10px"> /* in first tr & th */ <tr style="border-top-left-radius: 10px"> <th style="border-top-left-radius: 10px">

 <table class="table-bor"> <tr> <th class="title-borrow">Test</th> <td></td> </tr> <tr> <td class="calc-input">Amount of the loan ($):</td> <td><input id="amount" placeholder="$300 - $2,500" onclick="calculate(this);"></td> </tr> <!-- ... --> </table>

Answer 1

检查您的浏览器检查器，看看是否有什么东西覆盖了样式。 同样，您的检查员应该能够显示应用于任何元素的所有 css 属性，以便您可以查看实际应用了哪些元素。