如何「鎖定」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表格中的列？

回答

相關問題