如何使顶部/底部边框显示在左/右边框跨浏览器 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 中获取我想要的东西（chrome 对上述内容的渲染），而无需覆盖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>