Wie oberen/unteren Grenzen ontop von linken/rechten Grenzen erscheinen Crossbrowser css

Question

Ich möchte eine Tabellenkalkulation wie, mit vertikalen grauen Rahmen und horizontalen schwarzen Rahmen (für Summen) stylen.

ich bekommen, was ich in Chrom mit dieser wollen: 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; 
} 

Aber IE (11) macht die vertikalen Ränder oben auf der horizontalen, Auch die horizontale Grenze ist im IE nicht ganz schwarz, es ist also etwas mehr los.

Gibt es eine Möglichkeit zu bekommen, was ich will (Chrom Render der oben genannten) in CSS, ohne Tricks wie Overlaying divs/andere Elemente, vernünftigerweise cross browser?

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>