表格边框半径[重复]

Question

如何为表格设置边框半径。阅读大量有关此的信息，但没有具体内容。

<table id="table-prices"> 
    <tr>
      <td></td>
      <td colspan="2" class="table-main">Длина</td>
    </tr>
    <tr>
      <td>Ширина</td>
      <td>190 см</td>
      <td>200 см</td>
    </tr>
    <tr>
      <td>80 см</td>
      <td>5496</td>
      <td>5496</td>
    </tr>
    <tr>
      <td>140 см</td>
      <td>5496</td>
      <td>5496</td>
    </tr>
    <tr>
      <td colspan="3">Цены указаны в грн.</td>
    </tr>
  </table>

table {
 border: 1px solid #f00;
 border-radius: 10px;
 border-collapse: separate; 
 border-spacing: 0;
}
td {
 border: 1px solid #f00;
}

快完成了。但是在表格的边框之后，角度正在显示。当我设置 owerflow-hiding - 表格内的网格丢失

Answer 1

如果你使用border-collapse: collapse; 比border-radius 不起作用，例如

table {
    border: 1px solid #f00;
    border-radius: 10px;
}

Demo
（另一个 table 正在使用 border-collapse: collapse;，因此 border-radius 失败）

---

可能大多数用户使用CSS Reset Stylesheet，它使用下面的sn-p..

table {
    border-collapse: collapse;
    border-spacing: 0;
}

所以它失败了，为了覆盖你需要使用的特定table

table.class_name {
    border-collapse: separate; /* Overriding collapsed border */
    border-spacing: 0;
}

GCyrillus 已经向您指出了间距，但他错过了 border-collapse 属性的 separate 值。

Answer 2

要折叠table 边界并仍然可以访问border-radius，您应该设置border-spacing:0; 而不是border-collapse:collapse;