title: Bootstrap responsive table with form input min width
body: <p>I am trying to create a responsive table that contains form inputs for several columns. From what I understand, the responsive tables shrink until its columns can't go any further, then it adds a scroller. However, the columns shrink to the point where I can't see the values in the input field so I need a way to impose a minimum width on these columns instead of having it determined by the column header text length. </p>
  
  <p>I have tried adding min-width:"10%" or "150px" to all the  elements in the column, but that didn't work. Here is my setup:</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table class="table table-bordered table-striped table-highlight"&gt;
              &lt;thead&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Cost&lt;/th&gt;
                  &lt;th&gt;Billing Type&lt;/th&gt;
                  &lt;th&gt;Tax&lt;/th&gt;
                  &lt;th&gt;Other Col&lt;/th&gt;
                  &lt;th&gt;Other Col&lt;/th&gt;
                  &lt;th&gt;Other Col&lt;/th&gt;
                  &lt;th&gt;Total&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="Some Long Name Here"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="13-Jul-2015"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="$12355.12"/&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select class="form-control"&gt;
                              &lt;option&gt;Monthly&lt;/option&gt;
                              &lt;option&gt;Yearly&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="another long value"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="some val"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="some val"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" class="form-control" value="some val"/&gt;&lt;/td&gt;
                      &lt;td&gt;$505.79&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;form class="form-horizontal"&gt;
    &lt;div class="table-responsive"&gt;
      &lt;table class="table table-bordered table-striped table-highlight"&gt;
        &lt;thead&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Date&lt;/th&gt;
          &lt;th&gt;Cost&lt;/th&gt;
          &lt;th&gt;Billing Type&lt;/th&gt;
          &lt;th&gt;Tax&lt;/th&gt;
          &lt;th&gt;Other Col&lt;/th&gt;
          &lt;th&gt;Other Col&lt;/th&gt;
          &lt;th&gt;Other Col&lt;/th&gt;
          &lt;th&gt;Total&lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="Some Long Name Here" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="13-Jul-2015" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="$12355.12" /&gt;&lt;/td&gt;
            &lt;td&gt;
              &lt;select class="form-control"&gt;
                              &lt;option&gt;Monthly&lt;/option&gt;
                              &lt;option&gt;Yearly&lt;/option&gt;
                          &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="another long value" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="some val" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="some val" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" class="form-control" value="some val" /&gt;&lt;/td&gt;
            &lt;td&gt;$505.79&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, some field values are cut off when the table shrinks. Any help is appreciated.</p>
  
  <p>Edit: I would <em>like</em> to continue using tables due to some legacy code preservation. However, I am open to any solution if need be.</p>