css - How is "width: 100%" computed when I add an element to a table cell dynamically? -

backgrid allows editing values in table, , accomplishes putting <input type="text"> inside <td>. input set max-width: 100% still pushes size of column out farther in cases.

for example, see grid on examples section , click item in "population" column. when gets editor class, padding set 0, , both <td> , <input> have box-sizing: border-box, width of column still increases.

so width: 100% not mean 100% of width of <td> @ time? or not possible make work using css only? use backbone event size of td , set input same size sounds bit hacky.

the way width of table columns calculated not trivial. try distribute available space among columns in way columns more content gets bigger share.

if go , "the content should big column" make more complex because create ciruclar dependency between content width , column width.

so width: 100% not mean 100% of width of <td> @ time?

no. when changes, updated. css not keep history, not know width of element @ particular time. width: 100% means after updated, input have same width <td>. may different before change.

i not have perfect solution problem, these ideas:

• check column width before replacing content using javascript (as noted in question)
• use fixed table layout. way columns have same width , not change based on content.
• set contenteditable on <td> instead of using input element. should not impact columns width — @ least not long not edit content.