Geek Answers Handbook

Width in TD with colspan not working (Chrome)

The following code does not correctly display the top line in Chrome (IE8 does fine, I have not tested in other browsers)

<head> </head> <body> <table width="100%" border="1"> <tr> <td width="15%">a</td> <td width="70%">b</td> <td width="15%">c <table border=1> <tr> <td valign="top">Subtotal:</td> <td valign="top">$2,464.34</td> </tr> </table> </td> </tr> <tr> <td colspan="3"> <input type="text" style="width:500px;" /> </td> </tr> </table> </body>

The fixed width in the INPUT control seems to be causing the problem. If I change 500px to 80%, it magically works correctly. Or, if I display the internal table in column "c", it also works.

Why does it look colspan = 3 is ignored? Any ideas?

+4
source share
2 answers

Guess what! :) after a bit of research (3 hours of work), I found that for some reason the display: table-cell is being rewritten in chrome. so just display the ad table and everything will be fine :).

Edited answer --------- So, after checking. It seems that some reset stylesheets put display: block on TDs. Therefore, if this happens, you can delete this stylesheet, edit or overwrite it.

+1
source

Wow, nice find .. it's pretty crazy. This seems to be a bug in Chrome. In this particular case, the 3rd column (c) apparently takes the width of the input control if it goes beyond 15% width and is removed from the width of the middle column (b). Try increasing the <input tag to 700px and see the cc column for more.

A workaround for chrome might be to simply use % as your width units for this input control

0
source

More articles:


All Articles