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

Answer 1

如果您使用border-collapse: collapse;而不是border-radius将无效，例如

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

Demo
（其他table正在使用border-collapse: collapse;，因此border-radius失败了）

大多数用户可能会使用CSS重置样式表，并使用下面的代码段。

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

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

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

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

Answer 2

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

表边界半径

2 个答案: