HTML/CSS中表格外边框圆角不生效问题求助（基于Hugo平台）

嘿，我之前在Hugo主题里也碰到过类似的样式失效问题，给你几个实用的排查和解决方向：

• 先排查border-collapse属性冲突
  很多Hugo主题会给全局表格设置border-collapse: collapse，这个属性会让表格边框合并，直接导致border-radius失效（包括你给td/th单独加的圆角也没用）。你可以试试给表格类加上这两行：

  .table-bor {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid $theme;
    border-radius: 10px;
    overflow: hidden; /* 防止表格内容溢出圆角范围 */
    /* 保留你原来的margin、padding等样式 */
  }
  

  如果不想改表格的border-collapse，还有个更稳妥的办法：用div把表格包起来，给div加圆角和边框，表格内部正常用collapse：

  .table-wrapper {
    border: 1px solid $theme;
    border-radius: 10px;
    overflow: hidden;
    margin: 50px 30px;
  }
  .table-wrapper table {
    width: 100%;
    border-collapse: collapse;
  }
  

  对应的HTML结构改成：

  <div class="table-wrapper">
    <table>
      <tr>
        <th class="title-borrow">Test</th>
        <td></td>
      </tr>
      <!-- 其他表格内容 -->
    </table>
  </div>
  

• 检查样式优先级和加载顺序
  Hugo主题自带的样式可能比你的自定义样式加载得晚，或者选择器优先级更高，导致border-radius被覆盖。你可以：

  1. 打开浏览器开发者工具（F12），选中表格元素，查看「Computed」面板里的border-radius是不是被划掉了，找到覆盖它的样式规则。
  2. 用更具体的选择器，比如如果表格在文章内容里，可以写成.post-content .table-bor，或者临时加!important验证是不是优先级问题（不推荐长期使用）。
  3. 确保你的自定义CSS文件在主题样式之后加载，比如在Hugo的config.toml里调整样式引入顺序。

• 验证SCSS变量是否生效
  你用了$theme变量，要确认Hugo正确编译了这个SCSS变量。可以临时把$theme换成具体颜色值（比如#2c3e50），看看边框和圆角会不会显示——如果变量没解析，边框都不会出现，圆角自然看不到效果。

• 关于你尝试的td/th圆角方案
  这个方案只有在border-collapse: separate时才会生效，而且需要给角落单元格设置对应圆角，同时调整td/th的边框（比如去掉多余边框）避免重叠。不过用div包裹的方法会更简单省心。

内容的提问来源于stack exchange，提问作者Tony Correia