1. 首页
  2. 问答
  3. 一个表格里面的固定列

一个表格里面的固定列

2015-02-09 32 views
0

我有一个高度为150 px的div表格。 第一列和最后一列通过css和jQuery修复。一个表格里面的固定列

但是，当表格行增加并跨越div高度150px，然后在div上方固定列aabar并且它们不是与表格行垂直滚动。

我想要第一个和最后一个列是固定的，所有其他列可以通过使用水平滚动条可见。

由于提前

Script是

$(document).ready(function(){ 
     $(".firstFixedColumn").css('left',$(".mainTable").offset().left); 
     $(".lastFixedColumn").css('left',$("#mainDiv").width() + $(".mainTable").offset().left -150); 
    });

CSS是

.custom_width_200px { 
    width: 150px; 
} 
.firstFixedColumn { 
    position: fixed; 
    left: 0px; 
    z-index: 200; 
    background-color: white; 
} 
.afterFirstColumn { 
    position: relative; 
    left: 150px; 
    z-index: 100; 
} 
.lastFixedColumn { 
    position: fixed; 
    z-index: 200; 
    background-color: white; 
} 
.beforeLastColumn { 
    position: relative; 
    right: 150px; 
    z-index: 100; 
} 
.mainTable { 
    text-align: center; 
} 
.mainTable th.notFirst, .mainTable td.notFirst { 
    position: relative; 
    left: 150px; 
}

和HTML是

<body> 
    <div id="mainDiv" style="width:75%;overflow:auto;position:relative;display:inline-block;height:150px;"> 
     <table cellpadding="0" cellspacing="0" border="0" class="mainTable" width="100%" id="programhierachy" style="table-layout:fixed;"> 
     <thead> 
      <tr> 
      <th class="firstFixedColumn fixedThtdproject account_text custom_width_200px"> <span style="padding-left:20px !important;">First Heading</span><!--<a class="custom_arrowLeft" onclick="SetColumns('PREV')"> </a>--></th> 
      <th class="notFirst afterFirstColumn custom_width_200px">Lorem ipsum </th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">Lorem ipsum dolor</th> 
      <th class="notFirst custom_width_200px">BeforeLast</th> 
      <th class="notFirst custom_width_200px">&nbsp;</th> 
      <th class="lastFixedColumn custom_width_200px">Last Heading</th> 
     </thead> 
     <tbody> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
      <tr> 
      <td class="fixedThtdproject account_level account_ll custom_width_200px firstFixedColumn">Lorem ipsum </td> 
      <td class="notFirst afterFirstColumn custom_width_200px" >11111111111</td> 
      <td class="notFirst custom_width_200px" >2222222</td> 
      <td class="notFirst custom_width_200px">33333</td> 
      <td class="notFirst custom_width_200px">4444444</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">1</td> 
      <td class="notFirst custom_width_200px">4</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">Y</td> 
      <td class="notFirst custom_width_200px">before last</td> 
      <td class="notFirst custom_width_200px">&nbsp;</td> 
      <td class="lastFixedColumn custom_width_200px"><span class="redbox_inner">last column</span></td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </body>

来源

2015-02-09 Saurabh Mahajan

回答

0

你可以通过设置position: absolute到t他首先和最后一列。

见这个例子：

body { font:16px Calibri;} 
 
table { border-collapse:separate; border-top: 3px solid grey; } 
 
td { 
 
    margin:0; 
 
    border:3px solid grey; 
 
    border-top-width:0px; 
 
    white-space:nowrap; 
 
} 
 
div { 
 
    width: 600px; 
 
    overflow-x:scroll; 
 
    margin-left:5em; 
 
    overflow-y:visible; 
 
    padding-bottom:1px; 
 
} 
 
.first{ 
 
    position:absolute; 
 
    width:5em; 
 
    left:0; 
 
    top:auto; 
 
    border-right: 0px none black; 
 
    border-top-width:3px; /*only relevant for first row*/ 
 
    margin-top:-3px; /*compensate for top border*/ 
 
} 
 
.last{ 
 
    position:absolute; 
 
    width:5em; 
 
    right:0; 
 
    top:auto; 
 
    border-right: 0px none black; 
 
    border-top-width:3px; /*only relevant for first row*/ 
 
    margin-top:-3px; /*compensate for top border*/ 
 
    background: white; 
 
} 
 
.first:before {content: 'Row ';} 
 
.long { background:yellow; letter-spacing:1em; }
<div> 
 
    <table> 
 
    <tr><td class="first">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    <tr><td class="first">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="last">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> 
 
    </table> 
 
</div>

来源

2015-02-09 09:56:48

+0

喜拉胡尔感谢回答，但是当我的DIV（父表）设置高度各地为150px，则固定列出来的div。请帮助我。 – 2015-02-09 10:06:22

+0

@SaurabhMahajan在这种情况下，尝试将'overflow-y：scroll'应用于div。 – 2015-02-09 11:32:01

相关问题

 相关问题