使用CSS和JavaScript的HTML表的静态行和列
Static Rows and Columns of an HTML Table using CSS and JavaScript
我希望(至少)我的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>
你应该尝试使用jquery插件为相同的链接到插件
以下代码适用于水平滚动:
<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个表，在这种情况下，第一列是一个表，第二列和第三列是一个独立的表，包含在iframe中，紧挨着第一个(静态)表。这样你出来的时候就不会有JS了。当然，缺点是第一列与其他列是独立的，但是您肯定会得到想要的滚动效果。
我想我找到了一个解决方案，似乎在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>
相关文章：
- 压缩静态HTML文件中的JS和CSS
- 静态html中图像之间的空间在javascript中消失
- Angular JS:翻译带有大量文本的静态html页面
- 使用Sails.JS为静态HTML/JS应用程序提供身份验证
- 在静态html页面中保存计数器
- 加载静态HTML文件并按类拆分为数组
- 将静态HTML页面转换为动态生成的jQuery
- 如何在PHP中包含动态Javascript页面的静态HTML结果
- 如何限制用户访问ExpressJS/NodeJS中的静态html文件
- 当 Express 发送带有参数的静态 html 文件时，路径不正确
- 我可以用angularJS/Jquery / Javascript对静态html表进行排序吗?
- 使用 Nodejs 和 grunt 来构建静态 html 文件
- 当 Angular 索引页面加载到 DOM [Angular 模板到静态 HTML] 中时，我可以拍摄它的纯 HTML
- 如何在 AngularJS 中生成的模板中添加静态 HTML
- 使用文本文件中的内容生成静态 HTML 页面
- 静态 HTML，想在轨道上使用 ruby
- 使用 get 变量缓存静态 HTML 页面
- 将静态 HTML 与 React 一起使用
- 在构建过程中从节点/快速视图呈现静态 HTML 文件
- 使用静态 HTML 或静态 DOM Javascript 设计页面
