如何“锁定”HTML表格中的列？

我拉回大量的表格数据，我希望使用表格显示。唯一需要注意的是，我希望能够“锁定”一些列（fname/lname/email），以便当用户水平滚动时，这些列始终保持“锁定”状态并可见。我之前做过类似的事情，但那是在框架时代回来的，所以这种方法不再有效。如何“锁定”HTML表格中的列？

我正在考虑做一些巧妙的事情，把桌子放在彼此之上，但到目前为止，我还没有成功完成这项工作。任何人有任何聪明的建议？

的什么，我试图做一个很好的例子是在这里： http://www.google.com/squared/search?q=world+leaders

来源

2009-10-16 Nicholas Kreidberg

你可以使用iframe，但IME它是一个皇家疼痛确保列标题的尺寸与实际数据相同...... – 2009-10-16 18:08:45

发现此相关的问题http://stackoverflow.com/questions/1100835/scrollable-html-table-with-top-row-and-left-column-frozen – 2009-10-16 18:15:05

啊这就是我正在寻找的，谢谢你指点这篇文章！ – 2009-10-16 18:28:48

如果我理解正确的，你想要什么，你可以有位置的div容器：相对的，溢出：汽车和固定的宽度。在里面，你将你想要锁定的部分与另一部分分开，就是说，两个不同的div。包含“锁定”部分的div应具有position：absolute和left：0

这只是一个大图，但您应该能够以这种方式完成您想要的操作。

来源

2009-10-16 18:15:46 treznik

我以前用手做过，效果很好 - DataTables（jQuery插件）会自动为你做这个，这个扩展让生活变得更轻松！ http://datatables.net/extras/fixedcolumns/ – bUKaneer 2012-10-18 09:07:04

有没有办法做到这一点没有Javascript，例如纯粹的CSS？ – lanoxx 2013-09-25 13:20:30

下面的代码应该是不言自明的。您可以添加/删除TBODY中的行，而THEAD保持完全静态。这是TBODY和THEAD的存在;）

<style type="text/css" media="screen"> 
    .myTable 
    { 
    border:1px solid #000; 
    border-spacing:0px; 
    width:300px 
    } 

    .myTable thead td 
    { 
    background-color:#000; 
    color:#FFF; 
    } 

    .myTable tbody 
    { 
    height:300px; 
    overflow-y:auto; 
    overflow-x:hidden; 
    } 
</style> 

<table class="myTable"> 
    <thead> 
    <tr> 
     <td>Fname</td> 
     <td>Lname</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Lior</td> 
     <td>Cohen</td> 
    </tr> 
    <tr> 
     <td>Lior</td> 
     <td>Cohen</td> 
    </tr> 
    <!-- put more rows here --> 
    </tbody> 
</table>

来源

2009-10-16 18:16:27

我有点困惑，如何让事物“锁定”到位？我将在有几件物品，但我只想要其中的几个（为了这个例子的目的，我们只是说其中的一个，所以名字）保持“锁定”。真实世界的例子= http://www.google.com/squared/search?q=world+leaders - 注意名字永远不会移动。 – 2009-10-16 20:40:21

对不起，我误解了你的问题。我以为你的意思是一张带有静态标题行和可滚动内容的表格。我将用一个涵盖锁定左列的解决方案更新此帖子，除非您已经拥有一个，否则不再需要答案。 – 2009-10-17 03:08:15

其实我仍然需要一个解决方案，仍然没有找到任何我很满意的东西。 – 2009-10-18 17:18:04

像这样的东西应该工作：

你将不得不与它玩那么一点点，你没有水平滚动条为好吧，但你明白了。

当然，这在IE7中不起作用。它可能在8，但一如既往YMMV。祝你好运。我希望这能让你开始朝正确的方向发展。

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     var body = $('#table-body'); 
     for (var i = 0; i < 100; i++) { 
      var row = $('<tr />'); 
      var fname = $('<td />') 
      .text('FirstName' + i); 
      var lname = $('<td />') 
      .text('LastName' + i); 
      var email = $('<td />') 
      .text('FirstLast' + i + '@example.com'); 
      row 
      .append(fname) 
      .append(lname) 
      .append(email); 
      body.append(row) 
     } 
     }); 
    </script> 
    <style type="text/css"> 
     #table-body { 
     height: 150px; 
     overflow: auto; 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <thead> 
     <td>First Name</td> 
     <td>Last Name</td> 
     <td>Email</td> 
     <thead> 
     <tbody id="table-body"> 
     </tbody> 
    </table> 
    </body> 
</html>

来源

2009-10-16 18:33:09

如何“锁定”HTML表格中的列？

回答

相关问题