具有自动滚动功能的动态列固定长度答案

【问题标题】：Dynamic columns fixed length with auto scroll具有自动滚动功能的动态列固定长度
【发布时间】：2018-07-11 01:49:17
【问题描述】：

我在这里使用 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

【问题讨论】：

标签： html css angularjs

【解决方案1】：

因此您可以为.table td 和.table th 设置最小宽度

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

您可以将overflow中的.panel-body设置为auto：

.panel-body {
    overflow: auto;
}

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

【讨论】：

滚动效果很好，但宽度不行。这里有两件事：列的初始宽度是 2 大，其次是 min-width 它不起作用。你可以看到自己。继续添加大约 10-12 列，并且 with 不断减少。我想要的是一个恒定的宽度，最初是 50px，然后当我点击添加列时，宽度也应该保持 50px。
所以我添加了 !important 到宽度，添加的新列的宽度保持不变确实有效。但一个问题仍然存在。初始列宽（如果非常宽且前 4-5 列宽）。看看你的 jsfiddle。

【解决方案2】：

您必须将 min-width 和 max-width 设置为 th 并将 oveflow: auto 设置为 .panel-body.... 检查下面的CSS

.table th {
  max-width: 120px;
  min-width: 120px;
}
.panel-body{
  overflow: auto;
}

【讨论】：

除非添加重要属性，否则宽度部分不起作用。另外我们如何设置初始列的宽度。请参阅我对上一篇文章的评论。

【解决方案3】：

我最终做的是将以下类添加到 TD 和 Panel：

.fixed-width {
    min-width: 50px !important;    
    width: 50px !important;
 }

 .panel-body {
    overflow: auto;
}

【讨论】：