Question

我有一个使用rowspan的基本HTML表。

CSS

html, body{
    height: 100%;
    width: 100%;
}
table, tr, td{
    border:1px solid #f00;
    border-collapse: collapse;
}

HTML

<table>
<tr>
    <td>top image</td>
    <td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
    <td>bottom image</td>
</tr>
<tr>
    <td>image</td>
    <td>text</td>
</tr>
<tr>
    <td>image</td>
    <td>text</td>
</tr>
<tr>
    <td>top image</td>
    <td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
    <td>bottom image</td>
</tr>

JS Fiddle http://jsfiddle.net/38ro2p39/1/

在Firefox（36），Chrome（40）和IE10中，看起来我希望“Top Image”和“Bottom Image”单元的大小均匀。

在Safari（适用于Windows的5.1.7）中，“顶部图像”单元格是其内容的高度，“底部图像”填充其余空间。

我不想为行/列指定任何大小，因为内容会改变大小并需要拉伸。

为什么会发生这种情况，或者我如何解决它？谢谢！

PS。我正在寻找桌子的替代品。我确实看过将<div>与table-layout一起使用，但它缺少rowspan。

修改

感谢Pete指出Safari for Windows很古老。使用Safari 7.1.2 for Mac OSX的朋友确认该问题仍然存在于该版本中。

Answer 1

根据 spec ：

CSS 2.1没有指定跨越多行的单元格如何影响行高计算，除了所涉及的行高的总和必须足够大以包含跨越行的单元格。

我找不到修复此方法的CSS方法，但我想出了一个适合您代码的JavaScript方法：

var td= document.querySelectorAll('tr td[rowspan="2"]');

for(var i = 0 ; i < td.length ; i++) {
  if(Math.abs(td[i].offsetHeight/2 - td[i].parentNode.children[0].offsetHeight) > 1) {
    td[i].parentNode.children[0].style.height = td[i].offsetHeight/2 + 'px';
  }
}

基本上，它会使所有td具有行宽，并将其行中的另一个td设置为其高度的一半。

Working Fiddle

在Safari（7.1.2）中，行距，高度不正确的表格，在FF / IE / Chrome中很好

1 个答案: