IE11：在悬停时将表格行扩展到表格之外

Question

我在容器中有一个HTML表。在悬停时，我想要突出显示行，不仅是在表格内部，而是在外部延伸到容器的边缘。

这是我的第一次尝试：

＆＃13;

＆＃13;

body {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  width: 800px;
  border: 1px dotted gray;
  padding: 2rem;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  border: 1px dashed purple;
}

td, th {
  padding: .25rem;
  position: relative;
  text-align: left;
}

tr:hover {
  background: lightgray;
  cursor: pointer;
}

tr:hover td:first-child::before, tr:hover td:last-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  background-color: lightgray;
}

td:first-child::before {
  left: -2rem;
}

td:last-child::after {
  right: -2rem;
}

＆＃13;

<div class="container">
  <table>
    <thead>
      <th>Dato</th>
      <th>Lok. nr.</th>
      <th>Navn</th>
      <th>Status</th>
    </thead>
    <tbody>
      <tr>
        <td>06.12.2016</td>
        <td>25736</td>
        <td>Josommar-<br>set</td>
        <td>I arbeid</td>
      </tr>
      <tr>
        <td>07.12.2016</td>
        <td>10232</td>
        <td>Mannbru-<br>holmen</td>
        <td>Avsluttet</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

它在Chrome中运行良好，但我必须支持IE11，而在IE中，before和after元素的高度不正确。您可以在下面的屏幕截图中看到结果。

如何以在IE11中运行的方式执行此操作？