Table cells bad rendering with Google Chrome/Webkit

Question

Hi, 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 ?

Best Regards

Answer 1

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.