1

我有一个包含数据的大 HTML 表。数据由标题（列）和第一列标识。我们希望在内容可滚动时保留标题和第一行。类似于所有那些“可滚动表”插件（即http://www.tablefixedheader.com/demonstration/哪种工作但不能正确调整大小）所做的......但在两个维度上。在 Excel 中，这可以通过拆分和修复窗格来实现。

单元格的宽度/高度是动态的。

如果你有一个链接到一个实现类似这样的网站的链接，任何提示也很感激。

4

3 回答 3

2

这是出于好奇而采取的措施，我不确定这是否适合您-无论如何：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    table.sort_table {padding:0;margin:0;width:478px;font-size:12px;font-family:Arial, Helvetica, sans-serif;border-top:1px solid #ccc;border-left:1px solid #ccc;}
    table.sort_table tr td, table tr th {text-align:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:4px;vertical-align:top;}
    table.sort_table tr.first_row td {color:red;}
    table.sort_table tr td.data_content {padding:0;}
    table.data_table {border:0;}
    table.data_table tr td {border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
    table.data_table tr td.last {border-right:0;}
    table.data_table tr.last td {border-bottom:0;}
    .scroller {max-height:100px;overflow:auto;}
    .tdid {width:50px;}
    .tdname {width:200px;}
    .tdmail {width:200px;}
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="sort_table">
    <tr>
        <th class="tdid">Id</th>
        <th class="tdname">Name</th>
        <th class="tdmail">Email</th>
    </tr>
    <tr class="first_row">
        <td>Uid</td>
        <td>User name</td>
        <td>User email</td>
    </tr>
    <tr>
    <td colspan="3" class="data_content">
        <div class="scroller">
        <table cellpadding="0" cellspacing="0" width="100%" class="data_table">
            <tr>
                <td class="tdid">Uid</td>
                <td class="tdname">User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td>Uid</td>
                <td>User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td class="tdid">Uid</td>
                <td class="tdname">User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td>Uid</td>
                <td>User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td class="tdid">Uid</td>
                <td class="tdname">User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td>Uid</td>
                <td>User name</td>
                <td class="last">User email</td>
            </tr>            

                    </table>
        </div>
    </td>
    </tr>
</table>

</body>
</html>

诀窍是将数据表嵌套在排序表中。由于 overflow:scroll 或 auto 在 td 上不起作用，因此您必须在两者之间放置一个溢出设置为 auto 的 div。唯一的缺点是您必须td固定宽度，否则第二个表格单元格将无法很好地对齐。它使用比 max-height 来限制 data_content 高度（请注意，您需要对 ie6 进行 css 修复才能使 max-height 工作，但可以完成）。

从 ie7+ 开始工作，如果我有时间也可以为 ie6 做。

于 2011-03-14T13:12:18.373 回答
0

我希望这有帮助。

这些列类col-xs-*来自引导库，用于为表列分配特定维度。

.table-scrollable thead {
  width: 97%;
}

.table-scrollable tbody {
  height: 200px;
  overflow-y: auto;
  width: 100%;
}

.table-scrollable thead,
.table-scrollable tbody,
.table-scrollable tr,
.table-scrollable td,
.table-scrollable th {
  display: block;
}

.table-scrollable tbody td,
.table-scrollable thead>tr>th {
  float: left;
  border-bottom-width: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="table table-scrollable">
  <thead>
    <tr>
      <th class="col-xs-2">#</th>
      <th class="col-xs-8">Name</th>
      <th class="col-xs-2">Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-xs-2">1</td>
      <td class="col-xs-8">Name1</td>
      <td class="col-xs-2">23</td>
    </tr>
    <tr>
      <td class="col-xs-2">2</td>
      <td class="col-xs-8">Name2</td>
      <td class="col-xs-2">44</td>
    </tr>
    <tr>
      <td class="col-xs-2">3</td>
      <td class="col-xs-8">Name2</td>
      <td class="col-xs-2">86</td>
    </tr>
    <tr>
      <td class="col-xs-2">4</td>
      <td class="col-xs-8">Name3</td>
      <td class="col-xs-2">23</td>
    </tr>
    <tr>
      <td class="col-xs-2">5</td>
      <td class="col-xs-8">Name4</td>
      <td class="col-xs-2">44</td>
    </tr>
    <tr>
      <td class="col-xs-2">6</td>
      <td class="col-xs-8">Name5</td>
      <td class="col-xs-2">26</td>
    </tr>
  </tbody>
</table>

于 2015-12-17T14:04:32.910 回答
0

如果您有足够的数据，您将需要某种回收机制来保持浏览器平稳运行。页面上太多的元素会使浏览器变慢并可能崩溃（我在使用 1000 x 1000 的表格时遇到了问题，例如 100 万个单元格）。我在 vanilla js 中创建了一个 repo，它使用了二维滚动表的基线方法（类似于热图）。

这也适用于对角滚动，您可以在其中单击鼠标滚轮并拖动。

2D 可滚动表格（例如热图）

于 2021-07-26T19:04:06.123 回答