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

Question

I have a large table with headers as the first column, and a jQuery slider plugin (from https://github.com/keesschepers/jquery-ui-content-slider ) to scroll through the table horizontally while keeping the first column fixed. 我有一个带有标题的大表作为第一列，以及一个jQuery滑块插件（来自https://github.com/keesschepers/jquery-ui-content-slider ）来水平滚动表，同时保持第一列固定。

However, if I try to scroll downwards (vertically) I cannot see the rest of first column (larger than the height of the screen) since it has the fixed property (css). 但是，如果我尝试向下（垂直）向下滚动，我看不到第一列的其余部分（大于屏幕的高度），因为它具有固定属性（css）。 Is there any css or jQuery trick to fix this? 是否有任何CSS或jQuery技巧来解决这个问题？

CSS Code: CSS代码：

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

HTML Code: HTML代码：

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

jQuery Code: 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

Sadly I'm not too familiar with that table library, so I just threw something together here that works on FireFox (I'm sure Kees Schepers handles the cross-browser styling better than I care to). 可悲的是我对那个表库并不太熟悉，所以我只是在这里扔了一些可以在FireFox上运行的东西（我确信Kees Schepers能够比我更关心地处理跨浏览器样式）。

Anyway, the important part is the div ( #d ) around the table ( #t ) with position:relative; 无论如何，重要的部分是表（ #t ）周围的div（ #d ），其position:relative; . 。 That allows the position:absolute; 这允许position:absolute; of the :first-child elements to take effect relative to the stationary #d instead of the scrolling #t . of :first-child元素相对于静止#d而不是滚动#t生效。

Sample HTML: 示例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>

Hope that helps some. 希望有所帮助。

Answer 2

Someone has kindly written this for you to do exactly what you need, as a solution for making tables work in a responsive layout. 有人亲切地为您编写了这样做，以满足您的需求，作为使表格在响应式布局中工作的解决方案。 Check it out: 看看这个：

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

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

问题描述

2 个解决方案

解决方案1
0 2012-05-22 08:10:01

解决方案2
0 2012-05-22 11:42:07

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

问题描述

2 个解决方案

解决方案1 0 2012-05-22 08:10:01

解决方案2 0 2012-05-22 11:42:07

解决方案1
0 2012-05-22 08:10:01

解决方案2
0 2012-05-22 11:42:07