Question

我有一个带有标题的大表作为第一列，以及一个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>

Answer 1

可悲的是，我对这个表库并不太熟悉，所以我只是在这里扔了一些可以在FireFox上运行的东西（我确信Kees Schepers能够比我更关心地处理跨浏览器样式）。

无论如何，重要的部分是表格（#d）周围的div（#t）和position:relative;。这样，position:absolute;元素的:first-child相对于静止#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>

希望有所帮助。

Answer 2

有人亲切地写了这篇文章，让你完全按照你的需要做，这是一个让表格在响应式布局中工作的解决方案。看看：

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

css / jquery：水平滚动但不垂直滚动时固定

2 个答案: