AngularJS 或 CSS - 修复了多行和第一列的表格问题答案

【问题标题】：AngularJS or CSS - Issue with table with many rows and first column fixedAngularJS 或 CSS - 修复了多行和第一列的表格问题
【发布时间】：2017-03-22 08:44:27
【问题描述】：

我有一个表格，第一列固定，其他列水平滚动。我们为第一列的单元格使用特定的 CSS 类来获取它，如下所示：

tr > th.fixed, td.fixed {
  position:absolute;
  width: 25em;
  left: 3em;
  top:auto;
}

HTML 代码如下：

<div class="fm-list-container">
  <div class="table-responsive">
    <table class="table table-striped">
      ...
    </table> 
  </div> 
</div>

我们为内部 div（“table-responsive” CSS 类）设置 overflow-x: auto，为外部 div（“fm”设置 overflow-y: visible -list-container" CSS 类）。如果我们有很多行，水平滚动条会显示在表格的底部，所以它是不可见的。有没有办法让水平滚动条始终可见（第一列冻结）？我们尝试设置内部 div 的 max-height ，但此属性不适用于第一列。因此，第一列和其他列具有不同的垂直滚动。有解决办法吗？提前致谢。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

如果您使用的是 bootstrap，它看起来像使用 angular js 版本 https://angular-ui.github.io/bootstrap/ 然后使用 max-height 应该可以工作。

【讨论】：

我不明白你的回答。你会使用一些引导组件而不是 html 表吗？
所以不要包含 bootstrap 网站中的 bootstrap.min.js。您需要从网站上下载并包含与 angular js 一起使用的那个，否则，您会发现某些东西无法正常工作。您还需要将它包含在您的模块中，例如 angular.module('myModule', ['ui.bootstrap']);