html - 向动态创建列的表添加水平滚动

Question

我有一个 html 表格如下:

 <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>

这些列是通过剔除 JS 代码动态生成的。列的范围可以从 3(最小)到 20 左右。所以我试图向它添加一个水平滚动条，以便用户可以向右滚动。我还想设置一个固定的列宽，比如 20%。下面是我的 JS fiddle 。

https://jsfiddle.net/aman1981/6fjcuhcf/41/

但我已经尝试对 css 进行许多更改，但它没有添加滚动，也没有保持列宽固定。

请参阅我根据 Add horizontal scrollbar to html table 使用的建议

但它没有添加滚动条。我还缺少什么？

Answer 1

我能够使用此 css 添加滚动并使我的列固定宽度:

<style>
.table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width:1000px;
}
.table td,th {
    display:inline-block;
    width: 180px !important;
}