表格边框半径[重复]

Posted 2023-03-05

【中文标题】表格边框半径[重复]

【英文标题】：Table border-radius [duplicate]

【发布时间】：2014-05-31 09:25:15

【问题描述】：

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

<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 - 表格内的网格丢失

【参考方案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 值。

【讨论】：

关于边框崩溃的好消息，从来不知道。

它有效，但在示例中，表格没有网格，当我设置为 td 边框时 - 表格看起来很糟糕（因为它没有边框折叠）

@Barns 我已经给你解决方案了

@Mr.外星人，也许我什么都不懂

【参考方案2】：

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