如何“锁定”HTML表中的列?

如果我正确理解了你想要什么,你可以有一个容器div,位置:相对,溢出:自动和固定宽度。在它里面,你把你想被锁定的部分与另一个部分分开,比如说,分成两个不同的div。包含“锁定”部分的div应该具有position:absolute和left:0。

这只是大局,但你应该能够通过这种方式实现你想要的东西。

下面的代码应该很容易解释。您可以在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>

这样的东西应该奏效:

你将不得不稍微尝试一下,这样你就不会有水平滚动条了,但你会明白的。

当然,这在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>