如何在桌面上设置圆形边框并进行边框折叠:折叠？

Question

我有以下内容:

<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>

例

我想有圆形边框,单元格之间没有空格也有我的表格的顶部标题区域不同的颜色.但它似乎没有用.

我创造了这个小提琴.当我注释掉边框折叠时,我得到圆角边,但是在单元格之间有空格.当它在我没有边界半径和单元格之间没有空间.

更新:

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

Answer 1

添加border-spacing:0而不是border-collapse:collapse在您的表标签上修复它:

jsFiddle演示