css/jquery：水平滚动但不垂直滚动时修复答案

【问题标题】：css/jquery: Fixed when scrolling horizontally but not verticallycss/jquery：水平滚动但不垂直滚动时修复
【发布时间】：2012-05-22 19:42:07
【问题描述】：

我有一个带有标题作为第一列的大表格，还有一个 jQuery 滑块插件（来自https://github.com/keesschepers/jquery-ui-content-slider），可以在保持第一列固定的同时水平滚动表格。

但是，如果我尝试向下（垂直）滚动，我看不到第一列的其余部分（大于屏幕的高度），因为它具有固定属性 (css)。是否有任何 css 或 jQuery 技巧来解决这个问题？

CSS 代码：

     table tr td:first-child { position: fixed; }

HTML 代码：

      <div id="#content-scroll">
      <table>
      <tr><td></td>...and many more cells</tr>
      ...and many more rows
      </table></div>

jQuery 代码：

             <script type="text/javascript">
        $(document).ready(function() {
            $("#content-slider").slider({
                animate: true,
                change : function (e, ui) {
                    var maxScroll = $("#content-scroll").prop("scrollWidth") -
                        $("#content-scroll").width();
                    $("#content-scroll").animate({
                        scrollLeft : ui.value * (maxScroll / 100)
                    }, 1000);
                },
                slide : function (e, ui)
                {
                    var maxScroll = $("#content-scroll").prop("scrollWidth") -
                        $("#content-scroll").width();
                    $("#content-scroll").prop('scrollLeft' ,ui.value * (maxScroll / 100));
                }
            });
        });
    </script>

【问题讨论】：

您是否尝试在 tbody 上设置高度和溢出-y？
如果您想要内联垂直滚动，请将#content-scroll 上的overflow:hidden 更改为overflow-x: hidden;，否则将高度设置为更高的值或使用jquery 进行检查:)
@fudgey 我的代码中没有 tbody，我不确定有一个 tbody 会有什么帮助..
@Marco Johannesen overflow-x 仅在水平方向停止表溢出，在垂直方向停止溢出。两者都不允许向下滚动固定的第一列。除了第一列，我可以向下滚动表格的其余部分。
table tr td:first-child { position:absolute;左：8px； } 似乎有效，但扰乱了表格的正常流动......

标签： jquery html css

【解决方案1】：

遗憾的是，我对那个表格库不太熟悉，所以我只是在这里拼凑了一些适用于 FireFox 的东西（我确信 Kees Schepers 处理跨浏览器样式的能力比我关心的要好）。

无论如何，重要的部分是桌子周围的 div (#d) (#t) 和 position:relative;。这允许:first-child 元素的position:absolute; 相对于静止的#d 而不是滚动的#t 生效。

示例 HTML：

<html>
<head>
    <style type="text/css">
    #d { /*** Important part is here ***/
        position:relative;
    }
    #t {
        display:block;
        overflow-x:scroll;
        overflow-y:visible;
        width:412px;
    }
    #t tbody {
        display:block;
        margin-left:202px;
    }
    #t th,
    #t td {
        border:1px solid #000;
    }
    #t tr th:first-child,
    #t tr td:first-child {
        background:#FFF;
        left:0;
        position:absolute;
        width:200px;
    }
    #t tr td div {
        height:200px;
        width:200px;
    }
    </style>
</head>
<body>
    <div id="d">
        <table id="t" cell-padding="0" cell-spacing="0">
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
            <tr>
                <td><div>###</div></td>
                <td><div>###</div></td>
                <td><div>###</div></td>
                <td><div>###</div></td>
            </tr>
            <tr>
                <td><div>###</div></td>
                <td><div>###</div></td>
                <td><div>###</div></td>
                <td><div>###</div></td>
            </tr>
        </table>
    </div>
</body>
</html>

希望对一些人有所帮助。

【讨论】：

【解决方案2】：

有人特意为您编写了此代码，以完全满足您的需求，作为使表格在响应式布局中工作的解决方案。看看吧：

http://www.zurb.com/playground/responsive-tables

【讨论】：

它在 Firefox 上完美运行，不幸的是在 IE 上根本不行：/