表格边框没有给出欲望结果

Question

我想制作一个带圆角的表格和一个<tr>'s之间的单一实线边框。但是，我似乎有一个正确使用border-collapse的问题。当我设置border-collapse: separate，我得到如下：

结果 - 边界崩溃：独立

代码

HTML

<table> 
    <tr> 
     <td> 
      This 
     </td> 
     <td> 
      that 
     </td> 
     <td> 
      the other. 
     </td> 
    </tr> 
    <tr> 
     <td> 
      This 
     </td> 
     <td> 
      that 
     </td> 
     <td> 
      the other. 
     </td> 
    </tr> 
</table> 

CSS

table, tr { 
border: 1px solid black; 
border-collapse: separate; 
border-color: #ACACAC; 
border-radius: 5px; 
} 

然而，当我使用border-collapse: collapse，我得到的<tr>'s但角不是圆的，因为在这里看到的正确的路线：

结果 - 边界崩溃：崩溃

有谁知道如何让两个0之间的界线带圆角？

非常感谢！

Answer 1

在表元素添加cellpadding = 0 and cellspacing = 0，去掉TR elments的border-bottom并添加这个CSS border-bottom对所有TD元素，除了最后一个，如：

tr:not(:last-child) td{  
    border-bottom:1pt solid #ACACAC; 
} 

table, 
 
tr { 
 
    border: 1px solid black; 
 
    border-color: #ACACAC; 
 
    border-radius: 5px; 
 
} 
 
td { 
 
    padding: 5px; 
 
} 
 
tr:not(:last-child) td { 
 
    border-bottom: 1pt solid #ACACAC; 
 
}

<table cellspacing=0 cellpadding=0> 
 
    <tr> 
 
    <td> 
 
     This 
 
    </td> 
 
    <td> 
 
     that 
 
    </td> 
 
    <td> 
 
     the other. 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     This 
 
    </td> 
 
    <td> 
 
     that 
 
    </td> 
 
    <td> 
 
     the other. 
 
    </td> 
 
    </tr> 
 
</table>

据工作：

http://jsfiddle.net/csdtesting/dngpq4hb/3/