Question

在以下代码中，COL1A和COL3A与Chrome或Webkit的高度不是50％。它适用于IE7和Firefox。

<table border="1">
  <tr>
    <td height="100%">COL 1A</td>
    <td rowspan="2">COL 2</td>
    <td>COL 3A</td>
    <td rowspan="2">
      COL 4<br/>
      COL 4<br/>
      COL 4<br/>
      COL 4<br/>
      COL 4<br/>
      COL 4<br/>
      COL 4<br/>
      COL 4<br/>
    </td>
  </tr>
  <tr>
    <td height="100%">COL 1B</td>
    <td>COL 3B</td>
  </tr>
</table>

演示： http://dl.dropbox.com/u/255810/Jalios/Demo/TableChrome/table2.html

我试图设置各种高度（在TR或TD上）。我也尝试用填充或边距设置图像......但没有任何作用。

这是Chrome错误吗？是否有转弯或提示？

Answer 1

对于td，height属性不是 strict 定义的一部分，仅在过渡中，也许WebKit不实现它。尝试使用CSS。

编辑：CSS也没有运气。也许你必须每行使用一行，然后你可以使用正确的rowspan属性来生成50％高度的单元格。

Answer 2

似乎是webkit中的一个问题。我在Chrome和Safari方面遇到同样的问题。当具有特定高度的行（除了中心的一些行）之外，这会出现。如果有另一个具有更高行数的列，则最后一个将被放大。横向问题不会出现。

您必须在cols 1和3中的单个单元格中使用另一个表并避免使用rowspan

<table border="1">
<tr><td><table height=100%><tr><td height="100%">COL 1A</td></tr>
                <tr><td height="100%">COL 1B</td></tr>
        </table></td>
<td><td>COL 2</td>
<td>COL 3A</td>
<td>
  COL 4<br/>
  COL 4<br/>
  COL 4<br/>
...

此外，您必须使用css

管理内部表的边框

使用Google Chrome / Webkit对表格单元格进行渲染

2 个答案: