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>

Example

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

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

更新：

这似乎是一个完美的解决方案：Fiddle

Answer 1

在表格标记上添加border-spacing:0而不是border-collapse:collapse会修复它：

jsFiddle Demo

Answer 2

以下是使用包装器div的示例：

<div style="display: table;
            padding: 2px;
            border-radius: 5px;
            border: 1px solid #999;">
  <TABLE style="border-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>
</div>

您可以在此处看到它：jsFiddle

注意：IE7及更早版本不支持display:table;。 IE8在文档中需要：!DOCTYPE。所有现代浏览器（包括IE9）都支持它，所以它应该不是问题。

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

2 个答案: