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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何使顶部/底部边框显示在左/右边框crossbrowser css的顶部

1 个答案: