html - IE11 中的边框折叠和 colspan

Question

我有一个简单的示例表格，其中包含 3 行和 5 列，样式带有 border-collapse: collapse 边框。

这里的问题是我在第二行有一个 colspan=4 td，而 IE11 (11.0.9600.17691) 没有显示该行的右边框。

你可以在这里看到这个例子:http://jsfiddle.net/j6u026oz/2/

我试过为 tr 和 th 元素添加一个额外的右边框，但它不起作用。

在 colspan=4 元素旁边添加一个额外的 th 可以解决这个问题，但如果可能的话，我更愿意用 CSS 解决这个问题，因为触摸HTML 结构意味着我正在从事的元素有很多变化。

谢谢!

Answer 1

您可以通过 CSS 添加额外的列，使用 ::after 伪元素:

Updated example

table {
  border-collapse: collapse;
  border: 1px solid black;
}

tbody > tr:first-child:after {
  content: "";
  display: table-cell;
}

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">colspan4</th>
    </tr>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
      <td>td4</td>
      <td>td5</td>
    </tr>
  </tbody>
</table>