I am currently using twitter-bootstrap and have encountered an issue with two tables. The first table can be viewed here: 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 issue lies in the fact that the text inputs in the first table do not resize, causing the table to be non-responsive. However, the second table example displays simple text perfectly.
I am seeking advice on how to make the input text dynamically adjust its width, thus eliminating the presence of a horizontal scrollbar.
Any assistance, tips, or suggestions would be greatly appreciated. Feel free to ask for more information if needed.