IE11 中的边框折叠和 colspan

Question

我有一个简单的示例 table，其中 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

删除

border-collapse: collapse;

来自您的 css 文件。

使用下面的代码

table{
    border: 1px solid black;
}

Answer 2

您可以通过 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>

Answer 3

使用 "outline" 而不是 "border"。

table{
  border-collapse: collapse;
  border: 1px solid black;
  outline: 1px solid red;    /* ---- this lil' guy ---- */
}

IE11 中的边框折叠和 colspan

Border-collapse and colspan in IE11

html

css

internet-explorer-11