表格单元格与Google Chrome / Webkit不兼容 [英] Table cells bad rendering with Google Chrome/Webkit

问题描述

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

On the following code, COL1A and COL3A are not 50% height with Chrome or Webkit. It works fine with IE7 and 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上）。我还尝试设置带有填充或边距的图像...但没有任何效果。

I've tried to set various height (on TR or TD). I also tried to set an image with a padding or margin ... but nothing works.

这是Chrome的bug吗？是否存在转身或者提示？

Is it a Chrome bug ? Is there a turn-aroud or tips ?

推荐答案

似乎是webkit中的一个问题。我在Chrome和Safari中遇到同样的问题。
当中心有一些特定高度的行除外时出现。如果还有另一列具有较高的行跨度，则最后一个将被放大。
横向不出现这个问题。

seems to be a problem within webkit. I have same problems with Chrome and Safari. This appears when having rows of specific height except some in the center. Just the last will be upscaled if there is another column with higher rowspan. in horizontal this problem does not appear.

您必须在第1列和第3列
的单个单元格内使用另一个表格，并避免rowspan

You have to use another table within a single cell in cols 1 and 3 and avoid 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

Additionally you have to manage the borders for the inner table using css

这篇关于表格单元格与Google Chrome / Webkit不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！