(转)supertable像excel那样固定table的表头和第一列
<!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
微软BI技术交流群:316744959
武汉NET技术群：961108969
NET技术群：21386099
本人具有丰富的系统开发经验，承接系统开发，小程序，NET系统开发，BI开发，有需求联系微信手机：15010195887
