google-chrome - 使用 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 管理内表的边框