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

Adding a horizontal scrollbar properly on a html table

本文关键字：添加 水平 滚动条 正确地 html      更新时间：2023-09-26

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

有人能帮助让其中一个(或两个)正常工作吗?一个纯css/html的解决方案是可取的，但我不介意添加javascript，如果它需要。

<标题>方法1:

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

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

这个解决方案的问题是，我正在使用引导网格，如果我指定的宽度为右边的列中的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; }
<标题>方法2:

第二种解决方案涉及创建单个表，并将左列指定为最上面的绝对列。这个选项与引导和调整大小，但我似乎不能为列指定一个固定的宽度。我希望每一列正好是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/

遵循您的方法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/

相关文章：