html - 边框超过两个 rowspans

Question

我将通过一个示例向您展示我的问题，这里我使用带有 rowspan 的列:

<table border="1" style="width:300px">
<tr>
  <td rowspan="2">Familie</td>
  <td id="jill">Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td id="eve">Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

不知何故，当我添加 css 时:

border-left: 1px solid red;

对于 #jill 两行有红色边框:http://jsfiddle.net/hPBds/16/

当我将此 css 添加到 #eve 时，它按应有的方式工作，只有一个边框获得此颜色:http://jsfiddle.net/hPBds/17/

有人可以告诉我为什么会发生这种情况以及我该如何解决吗？谢谢

Answer 1

它是 table 的 border-collapse 属性。 http://www.w3schools.com/cssref/pr_border-collapse.asp

它设置为 collapse，它正在整理 #jill 和 Familie td 的 border。

将 table 的 border-collapse CSS 设置为 separate 应该可以解决问题。虽然现在您将在其他所有内容上都有边框(显然，边框是原来的两倍粗)。

<table border="1" style="width: 300px; border-collapse: separate;">

这是一个 jsfiddle .