如何使顶部/底部边框出现在左/右边框的顶部crossbrowser css

Question

我想使用垂直灰色边框和水平黑色边框（用于总和）来设置表格样式的样式。

我得到了我想要的镀铬与此：https://jsfiddle.net/m9abo8f6/4/

HTML

<table> 
<tr><td>row1</td><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>row2</td><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>row3</td><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>Total</td><td>3</td><td>6</td><td>9</td></tr> 
</table> 

CSS

body { 
    background-color:white; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0px; 
} 

tr:last-child { 
    border-top: 1px double black; 
} 

td { 
    border-right: 1px solid #d0d0d0; 
} 

但IE（11）呈现在水平的顶部的垂直边界，在IE中水平边框也不是很黑，所以还有更多的东西在那里。

有没有办法在css中获得我想要的（铬的上述渲染），没有像覆盖div /其他元素，合理跨浏览器的技巧？

Answer 1

body { 
 
    background-color:white; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
tr:last-child td:before { 
 
    position: absolute; 
 
    background: #000; 
 
    margin-top: -2px; 
 
    height: 1px; 
 
    content: ''; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
td { 
 
    border-right: 1px solid #d0d0d0; 
 
}

<table> 
 
    <tr><td>row1</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td>row2</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td>row3</td><td>1</td><td>2</td><td>3</td></tr> 
 
    <tr><td>Total</td><td>3</td><td>6</td><td>9</td></tr> 
 
</table>