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

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/