Question

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

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

您可以在此处查看此示例：http://jsfiddle.net/j6u026oz/2/

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

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

谢谢！

Answer 1

您可以使用::after伪元素：

通过CSS添加额外列

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

删除

border-collapse: collapse;

来自你的css文件。

使用以下代码

table{
    border: 1px solid black;
}

Answer 3

使用“outline”而不是“border”。

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

IE11中的边界崩溃和colspan

3 个答案: