Adding horizontal scroll to a table whose columns are dynamically created - html

Question

I have a html table as below:
<div id="myDiv" class="table">
<table class="table table-striped table-bordered">
<thead>
<tr data-bind="foreach: columnNames">
<th> <span data-bind="text: $data"></span>
</th>
</tr>
</thead>
<tbody data-bind="foreach: data">
<tr data-bind="foreach: $parent.columnNames">
<td style="width:20px"><input type="text" class="form-control textbox"/> </td>
</tr>
<tr>
<td>
<input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
</td>
</tr>
</tbody>
</table>
</div>
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.
https://jsfiddle.net/aman1981/6fjcuhcf/41/
But I have tried many changes to the css but its not adding scroll not its keeping the columns width fixed.
Please see I have used suggestions as per Add horizontal scrollbar to html table
But its not adding scroll. What else am I missing here?

Answer 1

I was able to add scroll and make my columns fixed width using this css:
<style>
.table {
display: block;
overflow-x: auto;
white-space: nowrap;
width:1000px;
}
.table td,th {
display:inline-block;
width: 180px !important;
}