html - Google Chrome: Zero width table cells use up space -



html - Google Chrome: Zero width table cells use up space -

i have table 3 <td />. 2 of them have width attributes , styles of 0px. middle <td /> has no explicit width set.

jsfiddle here

<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="0" height="10" bgcolor="" style="background-color:#00ffff;height:10px;width:0px;"></td> <td height="10" bgcolor="" style="background-color:#000;height:10px;"></td> <td width="0" height="10" bgcolor="" style="background-color:#ff00ff;height:10px;width:0px;"></td> </tr> </tbody> </table>

i expect middle <td /> take entire space (and happens in firefox , ie)

however, in google chrome, 3 <td /> take same space.

1. why this? 2. bug in chrome? 3. there easy fix?

it looks firefox , ie have default property "table-layout:fixed" tables. chrome doesn't have default property. need forcefulness in chrome below.

table { border-collapse: collapse; border-spacing: 0; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; table-layout:fixed; }

demo

html css google-chrome cross-browser

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -