我希望（至少）将HTML表格的第一列作为静态列。其余列应水平滚动。如果表格垂直滚动，静态列和其他列都应滚动在一起。
在旧版本的IE中，您可以使用CSS表达式来完成此任务。可以在http://www.javascripttoolbox.com/lib/scrollingdatagrid/找到一个示例。
知道如何将其转换为HTML，CSS和JavaScript解决方案（跨浏览器）？
这是我到目前为止所提出的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="border: 1px solid red;">
<div style="position: relative; display: block; width: 200px;">
<div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;">
<table>
<tbody>
<tr>
<td style="left: 20px; position: absolute; top: auto;">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr>
<td style="left: 20px; position: absolute; top: auto;">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
</tbody>
</table>
</div></div>
</div>
</body>
</html>
答案 0 :(得分：1)
你应该尝试使用相同的link to plugin
的jquery插件答案 1 :(得分：1)
以下代码适用于水平滚动：
<html>
<head>
<style>
.grid { width: 300px; height: auto; overflow: auto; }
.grid td.static { width: 100px; position: fixed; background-color: white; }
.grid td.dynamic { width: 100px; }
.grid td { border: solid 1px black; }
.grid table { width: 500px; }
</style>
</head>
<body>
<div class='grid'>
<table cellpadding="0" cellspacing="0">
<tr>
<td class='static'>Header 1</td>
<td class='dynamic c1'>Cell 1A</td>
<td class='dynamic c2'>Cell 1B</td>
<td class='dynamic c3'>Cell 1C</td>
<td class='dynamic c4'>Cell 1D</td>
</tr>
<tr>
<td class='static'>Header 2</td>
<td class='dynamic c1'>Cell 2A</td>
<td class='dynamic c2'>Cell 2B</td>
<td class='dynamic c3'>Cell 2C</td>
<td class='dynamic c4'>Cell 2D</td>
</tr>
<tr>
<td class='static'>Header 3</td>
<td class='dynamic c1'>Cell 3A</td>
<td class='dynamic c2'>Cell 3B</td>
<td class='dynamic c3'>Cell 3C</td>
<td class='dynamic c4'>Cell 3D</td>
</tr>
<tr>
<td class='static'>Header 4</td>
<td class='dynamic c1'>Cell 4A</td>
<td class='dynamic c2'>Cell 4B</td>
<td class='dynamic c3'>Cell 4C</td>
<td class='dynamic c4'>Cell 4D</td>
</tr>
</table>
</div>
</body>
</html>
答案 2 :(得分：0)
也许不是最好的解决方案，但是当我看到你的例子时，我想到了什么：
创建2个表，本例中的第一列是表，第二列和第三列是第一个（静态）表旁边的iframe中包含的单独表。这样你就可以在没有任何JS的情况下出来。可以肯定的是，第一列与其他列无关，但您肯定具有所需的滚动效果。
答案 3 :(得分：-1)
我认为我找到了一个似乎适用于IE和Chrome的解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
<script type="text/javascript">
function scrollTable() {
var column1 = $("#dailyWorkColumn1");
var column2 = $("#dailyWorkColumn2");
column1.scrollTop(column2.scrollTop());
}
$(document).ready(function() {
var column2 = $("#dailyWorkColumn2");
var column2right = $('#dailyWorkColumn2 tbody td:nth-child(2)')[0].offsetLeft;
column2.scrollLeft(column2right);
});
</script>
<style type="text/css">
.dailyWorkColumn1 { overflow: hidden; width: 100px; height: 280px; border: 1px solid blue; position: absolute; left: 10px; top: auto; }
.dailyWorkColumn2 { overflow: auto; border: 1px solid red; margin-left: 102px; height: 300px; width: 400px; }
</style>
</head>
<body>
<div style="overflow-y: visible; overflow-x: hidden; border: 1px solid black;">
<div class="dailyWorkColumn1" id="dailyWorkColumn1">
<table style="width: 100px;">
<tr>
<td style="border: 1px solid purple;">Jason</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Jeff</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Dave</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Mike</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Michael</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Lori</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Ashley</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Sean</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Louis</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Chris</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Aaron</td>
</tr>
<tr>
<td style="border: 1px solid purple;">Marie</td>
</tr>
</table>
</div>
<div class="dailyWorkColumn2" id="dailyWorkColumn2" onscroll="scrollTable();">
<table>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
123456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
223456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
323456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
423456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
523456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
623456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
723456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
823456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
923456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
103456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
113456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
<tr>
<td style="min-width: 300px; border: 1px solid orange;">
123456
</td>
<td style="min-width: 300px; border: 1px solid brown;">
987654
</td>
</tr>
</table>
</div>
</div>
</body>
</html>