How to put a input text with dynamic width in a table? - html

Question

I'm using twitter-bootstrap and I have two tables like this: http://jsfiddle.net/MELUd/
<table class="table table-bordered">
<thead>
<tr>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
</tr>
</thead>
<tbody>
<tr>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
</tr>
</tbody>
</table>
The text inputs of the first table does not resizing so the table isn't responsive.
But in the second table example works perfectly with simple text.
How I can make the input text with dynamic width so I'll not see the horizontal scrollbar?
Any help, tip or advice will be appreciated, and if you need more information let me know and i'll edit the post.

Answer 1

I think the way to do it is to use javascript to change the width dynamically.
$(document).ready(function(){
$('input').each(function(){
$(this).width($(this).parent().width()-20);
});
});
Check out the fiddle
Please adjust your padding and margin accordingly to center the inputs.
Another solution is to display inputs as blocks
.table input{
display:block;
width:80%;
margin-left:auto;
margin-right:auto;
}
Check out the fiddle

Answer 2

you could either try specifying a max-width to the textboxes, either in px or em.
input[type='text']{max-width:4em}
I'd say go with em.