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
Post a Comment