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小提琴。

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

将水平滚动添加到动态创建列的表中

1 个答案: