html - 具有自动滚动功能的固定长度的动态列

Question

我在这里使用的是 angular js 1.3。我所拥有的是一个模态，当单击它时会向现有表添加一列，该列的名称基于模态中所做的选择。可以在此处添加任意多的列。这一切都很好。我的问题是我不确定如何保持固定的列宽和滚动。

当添加更多列时，列的宽度不断减小，甚至无法正常滚动。 抱歉，代码很多，所以只在这里发布一些代码和 jsfiddle:

http://jsfiddle.net/aman1981/u1vbeos5/107/

 <div class="panel-body">
    <table class="table table-bordered">
      <colgroup>
        <col class="unique-id">
      </colgroup>
      <thead>
        <tr>
          <th class="unique-id">Name #</th>
          <th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
          <!--<th class="view-next-set"><a href="#">...</a></th>-->
          <td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="r in targetTable.rows">
          <td contenteditable="true" class=""></td>
          <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
          <!--<td class="blank" colspan="2"></td>-->
        </tr>
      </tbody>
    </table>
  </div>

还有这张图片:

https://imgur.com/a/qCn1AO7

Answer 1

所以你可以为你的 .table td 和 .table th 设置一个最小宽度

.table td,
.table th {
  min-width: 120px;
}

并且你可以将你的.panel-body的overflow设置为auto:

.panel-body {
    overflow: auto;
}

http://jsfiddle.net/u1vbeos5/116/