二维可滚动表格

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

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

任何提示也赞赏，如果你有一个网站，实现这样的东西的链接。

来源

2011-03-14 pascal betz

你引用的例子似乎满足您的需求以及给我。你只需要将你的'第一行'放在 – BiAiB 2011-03-14 10:34:38

忘记提及：我引用的示例在调整大小时无法正常工作 – 2011-03-14 11:12:02

这是一个取只是出于好奇，我不知道这会适合你 - 反正：

<!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的宽度，否则第二个表单元格不能很好地对齐。它使用比最大高度来限制data_content高度（注意，您需要css修复ie6以使max-height工作，但可以完成）。

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

来源

2011-03-14 13:12:18 easwee

我希望这有助于。

<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-*从自举库一定尺寸分配给表列。

这是对应的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; 
}

来源

2015-12-17 14:04:32 WitVault

二维可滚动表格

回答

相关问题