在IE 11中，伪元素后面的标记无法正常工作

Question

table {
  border-top: 1px solid #000;
  border-collapse: collapse;
  width: 100%;
}
tr, th, td {
  border-bottom: 1px solid #000;
}
th {
  padding: 30px;
  position: relative;
  text-align: left;
  width: 30%;
}
th:after {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
}
td {
  padding: 30px;
  position: relative;
}
th + td:before {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  left: -1px;
  top: 30px;
  width: 1px;
}

<table>
  <tr>
    <th>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line<br>Line<br>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line</th>
    <td>Line<br>Line<br>Line</td>
  </tr>
  <!-- new problem arise -->
  <tr>
    <th rowspan="2">Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <td>Line</td>
  </tr>
</table>

我想拥有适合th标签的正确边框，顶部和底部都有一些均匀的差距。就像我在标题中所说的一样，我将after伪元素用于th标签，并且在IE 11中不起作用。请参阅附件以获取详细信息。

有人可以建议我解决这个问题吗？

预先感谢！

---

update

我实现了@MR Lister的解决方案，并且与单行th td TAG效果很好。

出现另一个错误是，当我将th与rowspan一起使用时，IE 11中的行为再次被打破。您能帮我彻底解决这个问题吗？

预先感谢！

Answer 1

看起来像一个错误。我不确定是否有解决方案，但这里有解决方法。

除了TH内的线外，在TD之后绘制另一个线（当然在屏幕上的相同位置）。

table {
  border-top: 1px solid #000;
  width: 100%;
}
tr, th, td {
  border-bottom: 1px solid #000;
}
th {
  padding: 30px;
  position: relative;
  text-align: left;
  width: 30%;
}
th:after {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
}
/* this is new */
th + td::before {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  left: -3px;
  top: 30px;
  width: 1px;
}
td {
  padding: 30px;
  position: relative; /* and I added this line */
}

<table>
  <tr>
    <th>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line<br>Line<br>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line</th>
    <td>Line<br>Line<br>Line</td>
  </tr>
</table>

新块中的 left: -3px旨在将新线路与旧线保持在相同的位置。
请注意，这取决于表的border-spacing属性的值，默认情况下是2px，但我怀疑您打算是0。如果您更改该属性。

在jQuery的帮助下，我在th中的额外标签中实现了我想要的东西。

(function($) {
  var $span = $("th").find("span");
  $span.each(function(index, span) {
    var $th = $(span).closest("th");
    var height = $th.height();
    $(span).css({
      "height": height
    });
  });
})(jQuery);

table {
  border-top: 1px solid #000;
  border-collapse: collapse;
  width: 100%;
}
tr, th, td {
  border-bottom: 1px solid #000;
}
th {
  padding: 30px;
  position: relative;
  text-align: left;
  width: 30%;
}
th > span {
  align-items: center;
  display: flex;
  padding-left: 50px;
}
th > span:after {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
}
td {
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th><span>Line</span></th>
    <td>Line</td>
  </tr>
  <tr>
    <th><span>Line<br>Line<br>Line</span></th>
    <td>Line</td>
  </tr>
  <tr>
    <th><span>Line</span></th>
    <td>Line<br>Line<br>Line</td>
  </tr>
  <!-- new problem arise -->
  <tr>
    <th rowspan="2"><span>Line</span></th>
    <td>Line</td>
  </tr>
  <tr>
    <td>Line</td>
  </tr>
</table>