使用CSS和JavaScript的HTML表格的静态行和列

我希望（至少）将我的HTML表格的第一列作为静态列。其余列应水平滚动。如果表格垂直滚动，则静态列和其他列应滚动到一起。使用CSS和JavaScript的HTML表格的静态行和列

在旧版本的IE中，您可以使用CSS表达式来完成此操作。一个例子可以在http://www.javascripttoolbox.com/lib/scrollingdatagrid/找到。

任何想法如何将其转换为HTML，CSS和JavaScript解决方案（跨浏览器）？

这是我想出了这么远：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
     <div style="border: 1px solid red;"> 
      <div style="position: relative; display: block; width: 200px;"> 
     <div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;"> 
      <table> 
       <tbody> 
        <tr> 
         <td style="left: 20px; position: absolute; top: auto;">Column 1</td> 
         <td>Column 2</td> 
         <td>Column 3</td> 
         <td>Column 4</td> 
         <td>Column 5</td> 
        </tr> 
        <tr> 
         <td style="left: 20px; position: absolute; top: auto;">Column 1</td> 
         <td>Column 2</td> 
         <td>Column 3</td> 
         <td>Column 4</td> 
         <td>Column 5</td> 
        </tr> 
       </tbody> 
      </table> 
     </div></div> 
      </div> 
    </body> 
</html>

来源

2011-10-12 Jason N. Gaylord

-1

我想我发现，似乎在IE和Chrome工作的解决方案：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script> 
     <script type="text/javascript"> 
      function scrollTable() { 
       var column1 = $("#dailyWorkColumn1"); 
       var column2 = $("#dailyWorkColumn2"); 
       column1.scrollTop(column2.scrollTop()); 
       } 

      $(document).ready(function() { 
       var column2 = $("#dailyWorkColumn2"); 
       var column2right = $('#dailyWorkColumn2 tbody td:nth-child(2)')[0].offsetLeft; 
       column2.scrollLeft(column2right); 
       }); 
     </script> 
     <style type="text/css"> 
      .dailyWorkColumn1 { overflow: hidden; width: 100px; height: 280px; border: 1px solid blue; position: absolute; left: 10px; top: auto; } 
      .dailyWorkColumn2 { overflow: auto; border: 1px solid red; margin-left: 102px; height: 300px; width: 400px; } 
     </style> 
    </head> 
    <body> 
     <div style="overflow-y: visible; overflow-x: hidden; border: 1px solid black;"> 
      <div class="dailyWorkColumn1" id="dailyWorkColumn1"> 
       <table style="width: 100px;"> 
        <tr> 
         <td style="border: 1px solid purple;">Jason</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Jeff</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Dave</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Mike</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Michael</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Lori</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Ashley</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Sean</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Louis</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Chris</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Aaron</td> 
        </tr> 
        <tr> 
         <td style="border: 1px solid purple;">Marie</td> 
        </tr> 
       </table> 
      </div> 
      <div class="dailyWorkColumn2" id="dailyWorkColumn2" onscroll="scrollTable();"> 
       <table> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          123456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          223456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          323456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          423456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          523456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          623456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          723456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          823456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          923456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          103456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          113456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
        <tr> 
         <td style="min-width: 300px; border: 1px solid orange;"> 
          123456 
         </td> 
         <td style="min-width: 300px; border: 1px solid brown;"> 
          987654 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

来源

2011-10-12 22:49:29

如果我在第一个表格单元中放置更长的文本，该怎么办？整个路线将会消失..：P – mithunsatheesh

也许不是最好的解决办法，但是当我看到你的榜样是什么来到我的脑海：

使2个表中，第一列在这种情况下将是一个表格，第二个和第三个是包含在第一个（静态）表格旁边的iframe中的单独表格。这样你就会没有任何JS出来。可以肯定的是，第一列与其他列表相比是独立的，但肯定会有所需的滚动效果。

来源

2011-10-12 03:33:34 Anonymous

但是，如果表格必须垂直滚动，那么这将如何解决我的问题？ –

你应该尝试使用jQuery插件同样link to plugin

来源

2011-10-12 03:39:17 Varun

我不希望有那么臃肿的东西。我宁愿从更基本的东西开始。 –

@ JasonN.Gaylord - 在这种情况下，你应该从问题中删除javacript标记，我想你打算使用普通的css和html来完成它，这也很简单，如Tran Dinh Thoai所示。 – Varun

不一定。我不介意使用JavaScript，但插件可以满足我需要的任何内容，然后执行一些内容。我正在寻找一些重量更轻的东西。 –

下面的代码与水平滚动的工作：

<html> 
<head> 
<style> 
.grid { width: 300px; height: auto; overflow: auto; } 
.grid td.static { width: 100px; position: fixed; background-color: white; } 
.grid td.dynamic { width: 100px; } 
.grid td { border: solid 1px black; } 
.grid table { width: 500px; } 
</style> 
</head> 
<body> 
    <div class='grid'> 
    <table cellpadding="0" cellspacing="0"> 
     <tr> 
     <td class='static'>Header 1</td> 
     <td class='dynamic c1'>Cell 1A</td> 
     <td class='dynamic c2'>Cell 1B</td> 
     <td class='dynamic c3'>Cell 1C</td> 
     <td class='dynamic c4'>Cell 1D</td> 
     </tr> 
     <tr> 
     <td class='static'>Header 2</td> 
     <td class='dynamic c1'>Cell 2A</td> 
     <td class='dynamic c2'>Cell 2B</td> 
     <td class='dynamic c3'>Cell 2C</td> 
     <td class='dynamic c4'>Cell 2D</td> 
     </tr> 
     <tr> 
     <td class='static'>Header 3</td> 
     <td class='dynamic c1'>Cell 3A</td> 
     <td class='dynamic c2'>Cell 3B</td> 
     <td class='dynamic c3'>Cell 3C</td> 
     <td class='dynamic c4'>Cell 3D</td> 
     </tr> 
     <tr> 
     <td class='static'>Header 4</td> 
     <td class='dynamic c1'>Cell 4A</td> 
     <td class='dynamic c2'>Cell 4B</td> 
     <td class='dynamic c3'>Cell 4C</td> 
     <td class='dynamic c4'>Cell 4D</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

来源

2011-10-12 03:49:55

它的工作原理类似于我上面展示的例子。我注意到的唯一事情是这样的：（1）单元格列A似乎部分隐藏（2）如果您使用适当的doc类型指定它是HTML 5文档，它似乎在IE中工作（3）垂直由于静态列似乎是绝对定位的，因此滚动效果不佳。 –

使用CSS和JavaScript的HTML表格的静态行和列

回答

相关问题