html - Automatic 1px width of div inside table -
this happens in chrome (43.0.2357.124) , safari (5.1.7) not firefox or internet explorer.
for reason, <div>
element in following code has automatic width of 1px.
table, tbody, tr, td, div { padding: 0; margin: 0; border: 0; } table, tbody, tr, td { border-spacing: 0; border-collapse: collapse; }
<table><tbody><tr><td><div></div></td></tr></tbody></table>
the same happens when applying display: inline-block;
, width: 100%;
<div>
simulate display:block
added bonus <td>
has height of 18px.
table, tbody, tr, td, div { padding: 0; margin: 0; border: 0; } table, tbody, tr, td { border-spacing: 0; border-collapse: collapse; } div { display: inline-block; width: 100%; }
<table><tbody><tr><td><div></div></td></tr></tbody></table>
i'm aware applying width: 0;
<div>
fixes problem, i'm not looking way remove automatic width. i'm curious why happens. browser bug or happen because of automatic styling of block elements?
something similar happens when <div>
not present in dom. when <td>
empty, parent elements have width of 1px while <td>
has width of 0.
table, tbody, tr, td { padding: 0; margin: 0; border: 0; border-spacing: 0; border-collapse: collapse; }
<table><tbody><tr><td></td></tr></tbody></table>
the issue doesn't seem of usual problems: padding, margin, or border, can't understand why div has width of 1px.
it looks div
being sized based on size of parent - td
in case (td
width 1px, can remove div
see that), , div's default behavior.
placing inside td
kind of opening pandora box - div
take width based on parent, td
size depends on content.
different browsers seem implement in different ways, , 1px width represents webkit's approach determining size of empty table cell.
Comments
Post a Comment