javascript - 在html表格上正确添加水平滚动条

Question

我正在尝试创建一个可以水平滚动同时保持左列卡住的日历表。我已经设法使用两种不同的方法让它工作，但它们都有小的显示问题。

有人可以协助让其中一个(或两个)正常工作吗？纯 css/html 解决方案会更好，但我不介意在需要时添加 javascript。

方法一:

第一种方法涉及创建一个容器表，其中包含一行和两个单元格，每个单元格中都有一个表格。左列包含行标题，右列包含一个可滚动的 div，里面有一个可以左右滚动的宽表。

参见:https://jsfiddle.net/rjcxc62a/

此解决方案的问题在于，我使用的是 Bootstrap 网格，如果我将右侧列中的 div 的宽度指定为 100%(以便整个表格可以显示为 100%)，那么表格完全显示在页面上，没有滚动条，这意味着整个页面需要向左/向右滚动(参见下面的 .leave-plan .data-holder 类)。这实际上意味着网格没有响应并且不会随窗口大小调整大小。

.leave-plan { width: 100%; font-size: 9pt; }
.leave-plan table { border-collapse: collapse; border-spacing: 0; display: block; table-layout: fixed; }
.leave-plan .data-holder { width: 400px; overflow-x: auto; display: block; }

方法二:

第二种解决方案涉及创建单个表并将左列指定为最顶层的绝对列。此选项适用于 bootstrap 并相应地调整大小，但我似乎无法为列指定固定宽度。我希望每列的宽度正好是 25px，但我似乎无法正确设置。列宽是根据单元格内容生成的，范围从 13px 到 18px，尽管 Google 显示 css 中的 25px 用于格式化单元格。 (这再次适用于第一个解决方案)

这里是重要的 CSS 部分:

.Calendar-Wrapper { overflow: auto; width: 100% }
.Calendar-Wrapper table { table-layout: fixed; }
.Calendar-Wrapper table tbody th:first-child { position: absolute; z-index: 1; width: 200px; background-color: white; text-align: left; }
.Calendar-Wrapper table td { height: 20px; width: 25px; }

参见:https://jsfiddle.net/e4zzst8c/

Answer 1

按照您的方法 1，我将标题列的位置更改为绝对位置，将 z-index 更改为 9(确保它始终位于顶部)，将数据列的位置更改为相对位置。检查下面的演示:

HTML:

<td class="fluid-col">
                    <div class="data-holder">
                        <table class="data">

CSS:

.leave-plan {width: 100%; font-size: 9pt; display: block; position: relative;}
.leave-plan .data-holder { display: block; }
.leave-plan { width: 100%; font-size: 9pt;overflow-x: auto; display: block; position: relative; }
.leave-plan .names {position: absolute;top: 2px;background: #fff; z-index: 9;}
.fluid-col {
      position: relative;
      width:100%;
      left: 200px;
      overflow:auto;
    }

演示:https://jsfiddle.net/rjcxc62a/6/