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 屬性，以便您可以查看實際應用了哪些元素。