首页 > 代码库 > 固定标题和左侧栏的表格初试
固定标题和左侧栏的表格初试
记得曾经做过一个公交查询系统的二期开发，其中一个模块要求固定标题和左侧栏，当时不知道是哪根筋抽了，一门心思想着position：fixed；在margin：0；padding0；还是可以用的，但是当margin和padding改变值以后就不能用了，以至于弄了一天都没弄出个啥，好在当时要求不高，还是勉强通过了技术总监的要求；现在想起来，从新做个测试，呀哈！居然很轻易的弄出来了。具体思路如下：
布局用三个div块实现，标题块，侧边栏块，内容块，块的内容用table表格实现
1.外部采用相对定位，内部标题和侧边栏采用绝对定位,内容部分用margin
2.当外部模块滚动条滚动时，
标题
oTop.style.left=oMain.offsetLeft+‘px‘;
oTop.style.top=scrolltop+‘px‘;
侧边栏
oLeft.style.left=scrollleft+‘px‘;
oLeft.style.top=oMain.offsetTop-32+‘px‘;
css代码如下
<style>
*{margin: 0;padding: 0;}
div.container_table{position: relative;width: 800px; height: 250px;overflow: scroll;z-index: 999;margin: 100px auto;}
div.topTitle{position: absolute;left: 103px; top: 0;width: 1020px;height: 30px;background: red;}
div.topTitle table tr{width: 1200px;height: 30px;}
div.topTitle table tr th{width: 100px;height: 30px;text-align: center;font-size: 20px;border: 1px solid #ccc;float: left;}
div.leftTitle{position: absolute;left: 0; top: 0px;width: 104px; height: 385px;background: blue;}
div.leftTitle table{width: 100px;}
div.leftTitle table tr{width:100px;height: 300px;border: 1px solid #ccc;}
div.leftTitle table tr td{width: 100px;height: 30px;border:1px solid #ccc;float: left;border-collapse: collapse;text-align: center;}
div.mainContent{width: 1020px; height: 352px;background: yellow;margin: 31px 0 0 103px;}
div.mainContent table tr{width: 1200px;height: 30px;}
div.mainContent table tr td{width: 100px;height: 30px;text-align: center;font-size: 20px;border: 1px solid #ccc;float: left;}
div.mainContent table,div.topTitle table,div.leftTitle table{border-collapse: collapse;}
</style>
html代码如下：
<body>
<div class="container_table" id="container_table">
<div class="topTitle" id="topTitle">
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
</table>
</div>
<div class="leftTitle" id="leftTitle">
<table>
<tr>
<td>表格</td>
<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>
<td>11</td>
</tr>
</table>
</div>
<div class="mainContent" id="mainContent">
<table>
<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>
<tr>
<td>21</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>
<tr>
<td>31</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>
<tr>
<td>41</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>
<tr>
<td>51</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>
<tr>
<td>61</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>
<tr>
<td>71</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>
<tr>
<td>81</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>
<tr>
<td>91</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>
<tr>
<td>101</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>
<tr>
<td>111</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>
</body>
js代码如下：
<script>
window.onload=function(){
var oTable=document.getElementById(‘container_table‘);
var oMain=document.getElementById(‘mainContent‘);
var oTop=document.getElementById(‘topTitle‘);
var oLeft=document.getElementById(‘leftTitle‘);
oTable.onscroll=function(){
var scrolltop=oTable.scrollTop;
var scrollleft=oTable.scrollLeft;
// console.log(scrollleft,scrolltop);
oTop.style.left=oMain.offsetLeft+‘px‘;
oTop.style.top=scrolltop+‘px‘;
console.log(oMain.offsetTop-scrolltop)
oLeft.style.left=scrollleft+‘px‘;
oLeft.style.top=oMain.offsetTop-32+‘px‘;
};
};
</script>
今天只是做个测试，后续会测试响应式表格。to be continued...
固定标题和左侧栏的表格初试