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

Question

我想为表格电子表格设置样式，使其具有垂直灰色边框和水平黑色边框(用于求和)。

我在 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/其他元素这样的技巧，合理地跨浏览器？

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>