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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -