Home/ Questions/Q 4564104
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T18:27:14+00:00

On the following code, COL1A and COL3A are not 50% height with Chrome or

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0