Geek Answers Handbook

Poor rendering of table cells using Google Chrome / Webkit

In the following code, COL1A and COL3A do not have a height of 50% with Chrome or Webkit. It works great 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 tried to set different heights (on TR or TD). I also tried to set the image with the add-on or brand ... but nothing works.

Is this a Chrome bug? Are there any twists or tips?

+4
source share
2 answers

seems like a problem in webkit. I have the same problems with Chrome and Safari. This appears when there are lines of a certain height, except for some in the center. Only the latter will scale if there is another column with a higher number of rows. in the horizontal plane, this problem does not appear.

You should use another table in the same cell in columns 1 and 3 and avoid rowpan

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

Also, you need to manage the borders for the internal table with css

0
source

With a td the height attribute is not part of a strict definition, only in transition mode, perhaps WebKit does not implement it. Try using CSS.

Edit: no luck with CSS. You may need to use one row per row, then you can use the correct rowspan attributes to generate cells with a height of 50%.

0
source

More articles:


All Articles