Question

我正在尝试设置一个表格，以便角落圆角，行（不是单元格）是实线。我遇到的问题是：

tr {
     border-bottom: solid;
}

不工作：（

到目前为止，这是我的代码：FIDDLE

如何为表格获得连续的实线边框？

Answer 1

您可以通过添加规则来实现实线：

SELECT PolicyNumber, MemberNumber, 'M' AS BenType,
    [M], [S], [C]
    FROM
    (SELECT PolicyNumber, MemberNumber, BenType 
        FROM #Data) AS SourceTable
    PIVOT
    (
    COUNT(BenType)
    FOR BenType IN ([M], [S], [C])
    ) AS PivotTable;

到父border-collapse: collapse;元素的CSS;这将消除单元格之间的间距，从而导致原始演示文稿边框中断。

＆＃13;

<table>

＆＃13;

table {
  background: red;
  border: 1px solid #000;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-collapse: collapse;
}
td {
  border-bottom: 1px solid #000;
}

＆＃13;

更新了JS Fiddle demo。

为了让<table> <tr> <td>Row one, cell one</td> <td>Row one, cell two</td> </tr> <tr> <td>Row two, cell one</td> <td>Row two, cell two</td> </tr> <tr> <td>Row three, cell one</td> <td>Row four, cell two</td> </tr> </table>具有弯曲的边框，我可以使用的唯一方法是使用以下组合：

<table>

不幸的是also hides the border，并且：

overflow: hidden;

模拟（现在隐藏的）边框。

＆＃13;

box-shadow: inset 0 0 0 1px #000;

＆＃13;

table {
  background: red;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #000;
}
td {
  border-bottom: 1px solid #000;
}

＆＃13;

更新了JS Fiddle demo。

Answer 2

在table上使用border-spacing。 table { ... border-spacing: 0; }指定相邻表格单元格边框之间的距离。

{{1}}

应该适合你。这是你修改过的小提琴。 http://dev.mysql.com/doc/refman/5.6/en/regexp.html

Answer 3

这样可能吗？

   table {
      background: red;
      border: 1px solid #000;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      border: solid;
    }

具有圆角的CSS表行边框

3 个答案: