Bootstrap responsive table with form input min width
The default css of .form-control forces this behavior, so you need to change the css of your input field like:
input.form-control {
width: auto;
}
Column width will be dynamic as user may input any length value! Wrap input fields in a div, set div width dynamically using JavaScript:
<tr>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" size="80" value="Some Long Name Here"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="13-Jul-2015"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="$12355.12"/></div></td>
<td>
<select class="form-control">
<option>Monthly</option>
<option>Yearly</option>
</select>
</td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="another long value"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td>$505.79</td>
</tr>
And the JS function:
<script>
function updateWidth(textbox) {
$(textbox).parent().css("width",(textbox.value.length + 2) + "em");
}
</script>