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

发布于 2024-08-08 11:45:39 字数 364 浏览 4 评论 0原文

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

我正在考虑做一些聪明的事情，将桌子放在一起，但到目前为止，我还没有成功地完成这项工作。有人有什么聪明的建议吗？

我正在尝试做的一个完美的例子在这里： http://www.google.com/squared/search?q=world+领导者

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

椒妓 2024-08-15 11:45:40

下面的代码应该是不言自明的。您可以从 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>

The code below should be pretty self-explanatory. You can add/remove rows from TBODY while THEAD remains perfectly static. This is what TBODY and THEAD exist for ;)

<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>

回复收藏 0 原文

呢古 2024-08-15 11:45:40

像这样的东西应该可以工作：

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

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

Something like this should work:

You are going to have to play with it a little so that you don't have the horizontal scroll bar as well, but you get the idea.

Of course, this didn't work in IE7. It may work in 8, but as always YMMV. Good luck. I hope this gets you started in the right direction.

<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>

回复收藏 0 原文