Question

我在高度为150像素的div内有桌子。第一列和最后一列是通过css和jQuery修复的。

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

我想要修复第一列和最后一列，并使用水平滚动条显示所有其他列。

先谢谢

脚本

  $(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>

Answer 1

您可以将position: absolute设置为第一列和最后一列。

见这个例子：

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>

固定div中的表的列

1 个答案: