向动态创建列的表添加水平滚动答案

【问题标题】：Adding horizontal scroll to a table whose columns are dynamically created向动态创建列的表添加水平滚动
【发布时间】：2018-09-05 00:55:41
【问题描述】：

我有一个如下的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 小提琴。

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

但是我已经尝试了对 css 的许多更改，但它没有添加滚动而不是保持列宽固定。

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

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

【问题讨论】：

当我查看 jsfiddle 时，表格似乎滚动正常？
我使用的是 chrome 浏览器版本 62。这也是我看到的图像：imgur.com/a/YXB6O
有人输入吗？
现在您将每列设置为 20px 宽度，但由于列标题，它们的最小尺寸可以是 62px。当屏幕足够小时，它似乎会滚动。您希望列更宽吗？
@PaigeMeinke 卷轴正在工作。我不得不清除我的浏览器缓存。不知道为什么要缓存它。现在仍然存在的一个问题是列的宽度。当我设置 td 的宽度时说 50px 或任何东西。它仅适用于第一列。我希望我所有的列都具有相同的宽度。看到这个更新的小提琴：jsfiddle.net/aman1981/6fjcuhcf/55

标签： html css

【解决方案1】：

我能够使用这个 css 添加滚动并使我的列固定宽度：

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

【讨论】：