Question

我已经尝试了一段时间，似乎无法解决这个问题。为什么我的HTML表格周围有双重边框？我只想要一个有圆边的边框。目前，我有一个圆形的边框，一旦是直的边框。我还需要划分细胞的边界。

让这个工作变得异常困难......我在这里做错了吗？

CSS：

.bottom-table  {  
    border-collapse: separate !important;  
    border-radius: 10px !important;  
    width: 75%;  
    text-align: center;  
    margin-right: auto;  
    margin-left: auto;  
}  

#bottomTable{  
    padding-bottom: 50px;  
}  

.bottom-table td {  
    padding-left: 10px;  
    padding-right: 10px;  
    padding-top: 20px;  
    padding-bottom: 40px;  
    vertical-align: top;  
}

jsFiddle Demo

Answer 1

没有，您的table有一个而您的td元素有另一个边框。删除一个：

.bottom-table td {
    border: 0;
}

请在此处查看：http://jsfiddle.net/shomz/5km7h/3/

要添加单元格分隔符，可以向左侧单元格添加右边框，例如：

.bottom-table td:first-child {
    border-right: 1px solid;
}

见这里：http://jsfiddle.net/shomz/5km7h/4/

Answer 2

Demo Fiddle

将border-collapse:seperate更改为collapse

这是因为默认边框应用于单元格，使用seperate实际上是说每个单元格都有分隔的边框（由border-spacing定义）

More on border-collapse from MDN

border-collapse CSS属性选择表格的边框模型。这个   对表格单元的外观和风格有很大的影响。

分离的模型是传统的HTML表格边框模型。   相邻的细胞各自具有其独特的边界。距离   它们之间由边界间距属性给出。

With rounded edges

要保持圆形边缘，您需要使用一些技巧 - 即将边框应用于具有圆边的父div，然后在第一个单元格的右侧添加边框{ {3}}，CSS：

#bottomTable {
    border:1px solid;/* <-- add border to parent div */
    border-radius:10px;/* <-- round corners */
}
.bottom-table {
    border-collapse:collapse;/* <-- collapse table borders */
    width: 75%;
    table-layout:fixed;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border:none;/* <-- remove default border*/
}
.bottom-table td:first-child {
    border-right:1px solid;/* <-- add border to first cell */
}
.bottom-table td {
    border:none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 40px;
    vertical-align: top;
}

Answer 3

该表有一个边框，但每个表格单元格都有自己的边框。

使用border-collapse: collapse代替separate合并触摸的单元格和表格边框，或者为表格单元格设置border: 0以完全删除内部边框。

为什么我的HTML表格有两个边框？

3 个答案:

Demo Fiddle

With rounded edges