title: Adding horizontal scroll to a table whose columns are dynamically created
body: <p>I have a html table as below:</p>
  
  <pre><code> &lt;div id="myDiv" class="table"&gt;
  &lt;table class="table table-striped table-bordered"&gt;
  &lt;thead&gt;
      &lt;tr data-bind="foreach: columnNames"&gt;
          &lt;th&gt; &lt;span data-bind="text: $data"&gt;&lt;/span&gt;
  
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody data-bind="foreach: data"&gt;
      &lt;tr data-bind="foreach: $parent.columnNames"&gt;
          &lt;td style="width:20px"&gt;&lt;input type="text" class="form-control textbox"/&gt; &lt;/td&gt;            
      &lt;/tr&gt;
      &lt;tr&gt;
           &lt;td&gt;
      &lt;input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" /&gt;
    &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The columns to these are generated dynamically via a knockout JS code. The columns can be ranging from 3 (minimum) to 20 something. So I am trying to add a horizontal scrollbar to it so that user can scroll to right. I also want to set a fixed width of column say 20%. 
  Below is my JS fiddle which I have. </p>
  
  <p><a href="https://jsfiddle.net/aman1981/6fjcuhcf/41/" rel="nofollow noreferrer">https://jsfiddle.net/aman1981/6fjcuhcf/41/</a></p>
  
  <p>But I have tried many changes to the css but its not adding scroll not its keeping the columns width fixed.</p>
  
  <p>Please see I have used suggestions as per <a href="https://stackoverflow.com/questions/5533636/add-horizontal-scrollbar-to-html-table">Add horizontal scrollbar to html table</a> </p>
  
  <p>But its not adding scroll. What else am I missing here?</p>