二維可滾動表格

我有一個包含數據的大型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

二維可滾動表格

回答

相關問題