方法1：

Question

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

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

方法1：

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

这个解决方案的问题是我正在使用引导网格，如果我在右边的列中指定div的宽度为100％（这样整个表可以显示为100％），那么table完全显示在页面上，没有滚动条，这意味着整个页面需要向左/向右滚动（参见下面的.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; }

方法2：

第二个解决方案涉及创建单个表并将左列指定为最顶层。此选项适用于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：

array: [0,0,0,0]

CSS：

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

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

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

方法1：

方法2：

1 个答案: