<!DOCTYPE HTML>

<html>

<head>

	<meta charset="utf-8"/>

	<title>像excel那样固定table的表头和第一列</title>

	<style type="text/css">

	.left,.right{float: left;height: 297px;background-color: #ccc;}

	#left_topic{height: 248px;overflow-y:hidden}

	.left{width:112px; border:1px solid #333;border-right:none;}

	.right{border: 1px solid #333; border-left: none;}

	.right_top{width:783px;overflow-x:hidden;}

	.right_content{overflow: scroll;width:800px;background-color: #fff;}

	#top_topic table , #content table {width:1000px;}

	.right_content{height: 265px;}

	.left span, .left td, .right td{

		line-height: 30px;

		text-align:center;

	}

	.left span{display: block;}

	.left span, .left td {width:110px; background-color: #ddd;}

	.right td{width:10%;}

	#top_topic td {background-color: #ddd;}

	.left span{border: 1px solid #333;border-left: none;border-top:none;}

	.left td{border: 1px solid #333; border-top:none;border-left: none}

	.right_top td {border: 1px solid #333;border-left: none; border-top:none;}

	.right_content td{border: 1px solid #333;border-left: none;border-top:none;}

	</style>

	<script type="text/javascript">

	function scroll(){

		var a = document.getElementById("content").scrollLeft;

		var b = document.getElementById("content").scrollTop;

		document.getElementById("top_topic").scrollLeft = a;

		document.getElementById("left_topic").scrollTop = b;

	}

	</script>

</head>

<body>

	<div class="left">

		<span>我是老大fixed</span>

		<div id="left_topic">

		<table cellspacing="0" cellpadding="0" border="0">

			<tr><td>栏目1</td></tr>

			<tr><td>栏目2</td></tr>

			<tr><td>栏目3</td></tr>

			<tr><td>栏目4</td></tr>

			<tr><td>栏目5</td></tr>

			<tr><td>栏目6</td></tr>

			<tr><td>栏目7</td></tr>

			<tr><td>栏目8</td></tr>

			<tr><td>栏目9</td></tr>

			<tr><td>栏目10</td></tr>

			<tr><td>栏目11</td></tr>

			<tr><td>栏目12</td></tr>

			<tr><td>栏目13</td></tr>

			<tr><td>栏目14</td></tr>

			<tr><td>栏目15</td></tr>

			<tr><td>栏目16</td></tr>

			<tr><td>栏目17</td></tr>

			<tr><td>栏目18</td></tr>

			<tr><td>栏目19</td></tr>

			<tr><td>栏目20</td></tr>

		</table>

		</div>

	</div>

	<div class="right">

		<div class="right_top" id="top_topic" >

		<table cellspacing="0" cellpadding="0" border="0">

			<tr>

				<td>标题1</td>

				<td>标题2</td>

				<td>标题3</td>

				<td>标题4</td>

				<td>标题5</td>

				<td>标题6</td>

				<td>标题7</td>

				<td>标题8</td>

				<td>标题9</td>

				<td>标题10</td>

			</tr>

		</table>

		</div>

		<div class="right_content" id="content" onscroll="scroll()">

		<table  cellspacing="0" cellpadding="0" border="0" >

			<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>100</td></tr>

			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>

			<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>

			<tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr>

			<tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr>

			<tr><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td></tr>

			<tr><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td></tr>

			<tr><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td></tr>

			<tr><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td></tr>

			<tr><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td></tr>

			<tr><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td></tr>

			<tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>

			<tr><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td></tr>

			<tr><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td></tr>

			<tr><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td></tr>

			<tr><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td></tr>

			<tr><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td></tr>

			<tr><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td></tr>

			<tr><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td></tr>

			<tr><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td></tr>

		</table>

		</div>

	</div>

</body>

</html>

转自：http://www1.w3cfuns.com/blog-5464610-5405106.html

(转)supertable像excel那样固定table的表头和第一列的更多相关文章

  1. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  2. bootstrap中固定table的表头

    前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...

  3. 固定table的表头同时固定列

    table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class= ...

  4. JavaScript：固定table的表头

    当表格数据很多,以致于容器块元素出现滚动条.而在滚动滚动条的时候,数据行会被块元素遮挡.若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置.下面的jsp代码可以实现表头固定, ...

  5. table 表格固定表头和第一列、内容可滚动

    整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  6. JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. layui table表格 表头与内容列错位问题（只有纵向滚动条的情况）

    版本2.4.5 问题展示: 存在问题:正好错位一个纵向滚动条的宽度 思路: 仔细观察th元素及th包裹的子元素div 如下图 发现th宽度莫名的就多了5px  我就纳闷了 解决方案:到table.js ...

  8. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  9. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

随机推荐

  1. os相关方法总结

    __file__表示当前文件 os.path.dirname表示当前文件所在路径的父路径 os.pardir表示当前文件名 os.path.join表示合并 os.path.abspath表示绝对路径

  2. php源码安装

    要用swoole,首先需要有PHP环境.由于swoole的某些特性,最好是能够从源码编译安装PHP,这样在使用过程中可以避免很多不必要的错误.PHP下载地址:http://php.net/在这里挑选你 ...

  3. RelativeLayout不能调用measure去直接测量子元素

    RelativeLayout在实现onMeasure方法时并没有像LinearLayout一样去重写如下代码: @Override protected void onMeasure(int width ...

  4. [LeetCode]题解（python）：112 Path Sum

    题目来源 https://leetcode.com/problems/path-sum/ Given a binary tree and a sum, determine if the tree ha ...

  5. Fiddler-008-简单模拟性能测试

    通过 Fiddler 可以简单的模拟性能测试的并发测试,此方法非常的简单,直接讲述如何使用,敬请参阅! 首先我们要获取需要并发的 HTTP请求,此操作非常简单,则在此不再赘述.获取到响应的 HTTP请 ...

  6. busybox sz rz命令

    之前板子和电脑之间传送文件的时候都是通过tftp网络下载.所以找了一下在文件系统中使用串口上传文件的方法. rz和sz命令使用zmoderm协议,SecureCRT也用提供这个命令的支持.由于是串口, ...

  7. Interview How to Count Squares

    火柴拼出多少个正方形 http://matchstickpuzzles.blogspot.com/2011/06/55-4x4-square-how-many-squares.html 输入是两个二维 ...

  8. nginx端口被占用解决方案

    killall -9 nginx或service nginx restart(重新启动)

  9. tomcat 禁用不安全的http请求模式 .

    HTTP服务器至少应该实现GET和HEAD方法,其他方法都是可选的.当然,所有的方法支持的实现都应当符合下述的方法各自的语义定义.此外,除了上述方法,特定的HTTP服务器还能够扩展自定义的方法. ht ...

  10. Java基础之线程——使用Runnable接口（JumbleNames)

    控制台程序. 除了定义Thread新的子类外,还可以在类中实现Runnable接口.您会发现这比从Thread类派生子类更方便,因为在实现Runnable接口时可以从不是Thread的类派生子类,并且 ...