如何在我的桌子和边框崩溃圆角边框：崩溃？ [英] How can I have a rounded border on my table and border-collapse: collapse?

问题描述

我有以下：

<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;">
  <THEAD>
    <TR style="background-color: red;">
      <TH>Weekday</TH>
      <TH>Date</TH>
      <TH>Manager</TH>
      <TH>Qty</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>Mon</TD>
      <TD>09/11</TD>
      <TD>Kelsey</TD>
      <TD>639</TD>
    </TR>
    <TR>
      <TD>Tue</TD>
      <TD>09/12</TD>
      <TD>Lindsey</TD>
      <TD>596</TD>
    </TR>
    <TR>
      <TD>Sun</TD>
      <TD>09/17</TD>
      <TD>Susan</TD>
      <TD>272</TD>
    </TR>
  </TBODY>
</TABLE>

示例

我想有圆角边框，单元格之间没有空格，也使我的表格的顶部标题区域有不同的颜色。但它似乎没有工作。

I would like to have rounded borders, no space between cells also have the top header area of my table a different color. But it doesn't seem to work.

我创建了这个小提琴。当我注释掉border-collapse我得到圆角边缘，但单元格之间的空间。当它在我得到没有边界半径和单元格之间没有空间。

I created this fiddle. When I comment out border-collapse I get the rounded edges but spaces between cells. When it's in I get no border radius and no space between cells.

更新：

这里似乎是一个完美的解决方案：小提琴

Here seems to be the perfect solution: Fiddle

推荐答案

添加 -spacing：0 而不是您的表格标签上的 border-collapse：collapse 可修复：

Adding border-spacing:0 instead of border-collapse:collapse on your table tag fixes it:

jsFiddle演示

这篇关于如何在我的桌子和边框崩溃圆角边框：崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！