使用 Google Chrome/Webkit 渲染表格单元格错误

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

似乎是 webkit 中的一个问题。我对 Chrome 和 Safari 也有同样的问题。 这出现在具有特定高度的行时，除了一些在中心。如果有另一列具有更高的行跨度，则最后一个将被放大。 在水平方向上不会出现这个问题。

您必须在第 1 列和第 3 列的单个单元格中使用另一个表格 并避免行跨度

<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 管理内表的边框

Answer 2

对于td，height属性不是strict定义的一部分，只是在transitional中，可能WebKit没有实现它。尝试使用 CSS。

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