在IE 11中，伪元素之后的标签不能正常工作

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想为th标签设置正确的边框，在顶部和底部都有一些间隙。就像我在标题中所说的那样，我对after标签使用th伪元素，它在IE 11中不起作用。请参阅附件中的详细信息错误。

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

提前多多感谢！

更新

我实施了@Mr Lister的解决方案，它适用于单行th + td标记。

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

提前致谢！

Answer 1

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

除了内部的线条之外，在它后面的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.如果更改了，请相应地调整此值。

Answer 2

在jQuery的帮助下，我通过th内的额外标记实现了我想要的完美效果。

＆＃13;

＆＃13;

(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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;