html / css中表格上的边框半径答案

【问题标题】：border-radius on table in html/csshtml / css中表格上的边框半径
【发布时间】：2021-11-21 11:07:05
【问题描述】：

我想在表格的外边框上设置一个圆形边框。但是，我正在尝试的任何东西似乎都没有工作。任何建议将不胜感激。更奇怪的是，当我在 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>

【问题讨论】：

检查你的浏览器控制台是否应用了css。您的问题无法重现，因为您的代码正确且运行良好
这是什么“边框颜色：$theme;”你检查变量 $theme 是否有有效的颜色代码
@Asif 我在技术上使用 SCSS，所以主题颜色是整个网站用作变量的颜色（这样我就不必输入所有十六进制代码）。跨度>
@Sfili_81 ，当你说检查你的浏览器控制台时，你是什么意思？我在本地运行代码，所以我所做的任何更改都应该填充？我也试过检查 Chrome 和 Safari。两者都不接受更改。真可惜。
在浏览器上按 F12 可以看到浏览器控制台

标签： html css html-table

【解决方案1】：

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

【讨论】：