边界越过两个rowpans

时间:2014-08-04 23:38:19

标签: html css

我将通过一个示例向您展示我的问题,这里我使用带有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/

有人可以说我为什么会这样,以及我如何解决它?感谢

1 个答案:

答案 0 :(得分:1)

这是table的{​​{1}}属性。 http://www.w3schools.com/cssref/pr_border-collapse.asp

设置为border-collapse,正在整理collapseborder #jill的{​​{1}}。

td的{​​{1}} CSS设置为table,这样可以解决问题。虽然现在你将拥有其他所有东西的边界(可见,边界厚度是其两倍)。

border-collapse

这是jsfiddle