二维可滚动表 [英] Two dimensional scrollable table
问题描述
我有一个大的HTML表，其中包含数据。数据由标题（列）和第一列标识。我们希望标题和第一行留在内容可滚动时。类似于所有可滚动表格插件（即 http://www.tablefixedheader.com/demonstration/哪一种作品，但不适当调整大小）做...但在二维。
在Excel中，这可以通过拆分和固定窗格来实现。
I have a big HTML table which contains data. The data is identified by the header (columns) and the first column. We would like the header AND the first row to stay while the content is scrollable. Similar to what all those "scrollable table" plugins (i.e. http://www.tablefixedheader.com/demonstration/ which kind of works but does not resize properly) do... but on two dimensions. In Excel this can be achieved by splitting and fixing the panes.
单元格的宽度/高度是动态的。
The width/heights of the cells are dynamic.
如果你有一个链接到一个实现类似这样的网站，任何提示也赞赏。
Any hints are appreciated also if you got a link to a site which implements something like this.
推荐答案
这是一个好奇心，我不知道这将适合你 - 无论如何：
This is a take just out of curiosity and I'm not sure this will fit you - anyway:
<!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工作，但可以完成）。
The trick is to nest the data table inside the sort table. Since overflow:scroll or auto won't work on td you have to put a div with overflow set to auto inbetween. Only drawback is that you will have to make the td width fixed or else the second table cells won't align nicely. It uses than max-height to limit the data_content height (note you will need css fix for ie6 to make max-height work but can be done).
从ie7 +如果我有时间可以做ie6太。
Works from ie7+ on and if I had time could do it for ie6 too.
这篇关于二维可滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
