表固定标题和滚动条第一列

我想在这里实现的是锁定HEADER和第一列，以便我可以看到它是哪一天以及我在任何时候都在哪个名称下滚动向上/向下或左/右。表固定标题和滚动条第一列

我已经尝试了一些jQuery插件，使这种情况发生，但是当表格单元格过多，也容易在IE浏览器超时...所以我宁愿做这个纯CSS ..

任何人有一些有效在此输入？

的jsfiddle： http://jsfiddle.net/dd5ysjus/15/

，我会在这里粘贴代码，但它的太多...

这里是我的CSS：

div.horizscroll { 
    overflow: scroll; 
    width: 600px; 
    height: 150px; 
} 

.header { 
background: #D7DF01; 
}

来源

2014-09-05 rubberchicken

看看[this]（http://jsfiddle.net/rCuPf/7/embedded/result/）是否有帮助。它来自[这里]（http://stackoverflow.com/questions/10838700/large-dynamically-sized-html-table-with-a-fixed-scroll-row-and-fixed-scroll-colu/10922732#10922732）。 – Narong 2014-09-18 19:47:14

@rubberchicken这就像我得到....我设法正确地创建水平布局，但我放弃了垂直布局。我尝试应用相同的方法，但我认为我正在冻脑。但你可以从这个[示例]（http://jsfiddle.net/YMvk9/5062/）工作。 – Arty 2014-09-23 08:05:38

p.s.当您使用鼠标的中间按钮进行水平滚动时，jfiddle会对此有点有趣。最好在适当的html文件中尝试它。 – Arty 2014-09-23 08:08:10

-1

它很难找到它，但无论如何

东西

添加要修复的类修复程序

.fix{ position:fixed; background:#fff;}

和

div.horizscroll { 
    overflow-x: scroll; 
position:relative; 
    width: 600px; 
}

希望这将有助于

来源

2014-09-05 15:06:24 himanshu

对不起有关杂乱的代码..我清理它：http://jsfiddle.net/dd5ysjus/13/ – rubberchicken 2014-09-05 15:31:36

这将导致固定列重叠其他人滚动... – 2014-09-05 16:16:52

-2

您还可以通过更改HTML结构实现这一点，请检查您的更新小提琴 - http://jsfiddle.net/dd5ysjus/12/

<table class="table-intro"> 
..//here goes titles 
</table> 
<div class="horizscroll"> 
...//here all data you have 
</div>

来源

2014-09-05 15:23:33 shershen

它有什么问题吗？ – shershen 2014-09-06 11:09:55

-1

试试这个

<html> 
    <style> 
     table{border-collapse:collapse;} 
     table th{width:100px;} 
     .container{overflow:scroll;border:solid 1px red;width:700px;height:300px;} 
     .inner-table{position:relative;float:left;} 
     .inner-table tr td{padding:53px;background:#ccc;} 

    </style> 
    <body> 
     <table border=1> 
      <th></th> 
      <th>Header</th> 
      <th>Header</th> 
      <th>Header</th> 
      <th>Header</th> 
      <th>Header</th> 
      <th>Header</th> 

      <tr> 
       <td class="first-td">First Column</td> 
       <td colspan="6" rowspan="4" style="padding:0;width:200px"> 
        <div class="container"> 
        <table border=1 class="inner-table"> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
         <tr> 
          <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> 
         </tr> 
        </table> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td class="first-td">First Column</td> 
      </tr> 
      <tr> 
       <td class="first-td">First Column</td> 
      </tr> 
      <tr> 
       <td style="height:16px;"></td> 
      </tr> 
     </table> 
    </body> 
</html>

It Works！但是，您必须根据您的数据需求在容器行内设置行高。

来源

2014-09-24 04:34:41

此解决方案未解决@橡胶鸡的问题。当您向下滚动或朝向两侧时，标题不会跟随内容。 – Marquizzo 2014-09-25 18:04:07

表固定标题和滚动条第一列

回答

相关问题