如何在我的桌子上设置圆形边框和边框折叠：折叠？ [复制]

Posted 2023-03-05

【中文标题】如何在我的桌子上设置圆形边框和边框折叠：折叠？ [复制]

【英文标题】：How can I have a rounded border on my table and border-collapse: collapse? [duplicate]

【发布时间】：2012-02-11 23:00:00

【问题描述】：

我有以下：

<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

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

我创造了这个小提琴。当我注释掉border-collapse 时，我得到了圆形边缘，但单元格之间有空格。当它进入时，我没有边界半径，也没有单元格之间的空间。

更新：

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

【问题讨论】：

你看过这个：***.com/questions/4932181/…。那里也有一个小提琴，它似乎可以满足您的要求。

我找到的最接近解决方案的是：jsfiddle.net/JWb4T/1

【参考方案1】：

这是一个使用包装器 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

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

【参考方案2】：

在你的表格标签上添加border-spacing:0而不是border-collapse:collapse可以修复它：

jsFiddle Demo

【讨论】：

这几乎解决了它，但如果你仔细看，仍然会有一些颜色泄漏:-(

呃。你是对的。我想我很幸运地将 bf 颜色应用于 TH 而不是 TR，并给它们一个边界半径。一些tr:first-child th:first-child: border-radius:5px 0 0 0; 样式规则应该会有所帮助。凌乱，但我认为有效

哦，给thead元素指定半径和背景怎么样？会做一个小提琴，但 iPad 不适合编码......