Table cells bad rendering with Google Chrome/Webki

问题:

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>

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

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.

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

回答1:

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.

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/>
...

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

回答2:

For a td, the height attribute is not part of the strict definition, only in transitional, maybe WebKit does not implement it. Try using CSS.

Edit: No luck with CSS, either. Maybe you'll have to use one row per line, then you can use correct rowspan attributes to generate cells with 50% height.