How to prevent input elements from affecting a table's columns' widths?

Question

When a certain user action is performed I need to add a row to a table which contains an <input> in each cell. I need the <input>s to automatically fill the available space without affecting the column width.

I need to start with this:

And end up with this:

But instead, when I insert the inputs every column stretches to a minimum of ~170px (depending on the browser):

Simplified demo: http://codepen.io/patik/pen/qZXMyL — Click the button at the bottom and note how the original column widths are not preserved once the inputs have been inserted.

I could read the column widths before inserting the inputs and then manually apply max-width to each input, however I want the column to remain fluid (that is, the columns should continue to adjust to fit the plain text data). Other rows may be added or removed to the table and I need the inputs to adjust accordingly.

As you'll see in the demo I've already tried creating a <td><div><input></div></td> structure in the hopes that the <div> would fill the column and the <input> would fill the <div>, but that doesn't seem to be the case.

I'd prefer a CSS solution (even if I need to apply inline styles when the inputs are inserted) but I'd be okay with a JavaScript solution if it's the only choice.

Answer 1

The <input>s must have a size attribute if you want to control their width with CSS:

<td><input size="1"></td>

The value of size doesn't matter (though it does need some value—you can't simply write <input size> and have it work). As long as the attribute is present the element seems to respect any CSS I apply to it. In this case, width: 100% does the trick.

Demo: http://codepen.io/patik/pen/JXrEGX

Answer 2

Try adding this to your CSS code:

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

Meaning:

input[type="text"] Select only the input boxes of the type text.

width: 100% The width occupies 100% of the width available from the parent.

box-sizing: border-box Make the width also count the border.

http://codepen.io/anon/pen/xVLoYq