1

我正在尝试创建一个两边都有圆形顶部边框的表格,但表格的其余边框是方形的。

当我应用这个 CSS 时,边框仍然是方形的,但background-color 确实会被四舍五入,这会产生一种奇怪的外观:

table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}

结果是这样的: 在此处输入图像描述

如何“圆”左上/右上标题单元格中的边框,以便红色边框跟随背景?

请参阅JSFiddle以获取工作示例。

4

4 回答 4

9

这是因为边界崩溃了:

CSS

table {
    border-collapse: collapse;
}

看看快速修复

于 2013-08-08T10:03:50.940 回答
2

改变:

   table {
    border-collapse: collapse;
}

至:

 table {
    border-collapse: separate;
    border-spacing: 0px 0px;
}

演示

于 2013-08-08T10:19:56.333 回答
0

它可以通过仅将边框属性分配给table tag而不是分配给th tagand来解决td tag

table {
    background: #ccc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid red;
}
th {
    width: 70px;
}
th, td {
    text-align: left;
}

http://jsfiddle.net/Tomer123/z5832/9/

于 2013-08-08T10:16:15.547 回答
-1

以这种方式使用代码:

table {border:collapse;}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
于 2013-08-08T10:27:53.007 回答