Question

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

细胞的宽度/高度是动态的。

如果您获得了实现类似内容的网站的链接，那么任何提示都会受到赞赏。

Answer 1

这只是出于好奇，我不确定这适合你 - 无论如何：

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

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

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

Answer 2

我希望这会有所帮助。

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

这些列类col-xs-*来自bootstrap库，用于将特定维度分配给表列。

这是相应的css风格

.table-scrollable thead {
  width: 97%;
}
.table-scrollable tbody {
  height: 230px;
  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;
}

Answer 3

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

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

2D scrollable table (e.g. heatmap)

二维可滚动表

3 个答案: