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>