如何使顶部/底部边框出现在左/右边框的顶部跨浏览器css答案

【问题标题】：How to make top/bottom borders appear ontop of left/right borders crossbrowser css如何使顶部/底部边框出现在左/右边框的顶部跨浏览器css
【发布时间】：2016-09-18 17:02:21
【问题描述】：

我想为表格电子表格设置样式，带有垂直灰色边框和水平黑色边框（用于求和）。

我在 chrome 中得到了我想要的东西：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/其他元素这样的技巧，合理地跨浏览器？

【问题讨论】：

标签： css google-chrome internet-explorer cross-browser border

【解决方案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>

【讨论】：