Javascript div中表的固定列_Javascript_Html_Css

Javascript div中表的固定列

javascript html css

Javascript div中表的固定列,javascript,html,css,Javascript,Html,Css,我有一张桌子在一个高150像素的小隔间里。第一列和最后一列通过css和jQuery固定但是，当表行增加并穿过div高度150px时，div上方会出现固定列A，它们不会与表行垂直滚动我想第一列和最后一列是固定的，所有其他列可以通过使用水平滚动条可见提前谢谢剧本是 $(document).ready(function(){ $(".firstFixedColumn").css('left',$(".mainTable").offset().left);

我有一张桌子在一个高150像素的小隔间里。第一列和最后一列通过css和jQuery固定

但是，当表行增加并穿过div高度150px时，div上方会出现固定列A，它们不会与表行垂直滚动

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

提前谢谢

剧本是

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


第一标题
乱数假文
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
以前
最后一个标题
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏
乱数假文
11111111111
2222222
33333
4444444
Y
1.
4.
Y
Y
前头
最后一栏

您可以通过将

位置：绝对值设置为第一列和最后一列来实现
请参见此示例：

body{font:16px-Calibri；}
表{边框折叠：单独；边框顶部：3px实心灰色；}
运输署{
保证金：0；
边框：3倍纯色灰色；
边框顶部宽度：0px；
空白：nowrap；
}
div{
宽度：600px；
溢出-x：滚动；
左侧边缘：5em；
溢出y：可见；
垫底：1px；
}
.首先{
位置：绝对位置；
宽度：5em；
左：0；
顶部：自动；
右边框：0px非黑色；
边框顶部宽度：3px；/*仅与第一行相关*/
上边缘：-3px；/*补偿上边缘*/
}
.最后{
位置：绝对位置；
宽度：5em；
右：0；
顶部：自动；
右边框：0px非黑色；
边框顶部宽度：3px；/*仅与第一行相关*/
上边缘：-3px；/*补偿上边缘*/
背景：白色；
}
.first:在{content:'Row'；}之前
.long{背景：黄色；字母间距：1em；}

1QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
2QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
3QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
4QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
5QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
6QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
7QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
8QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
9QWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNMQWERTYUIOPASDFHJKLZXCVBNM
hi rahul感谢您的回复，但当我将div（表父级）的高度设置为150px左右时，固定列就会从div中出来。请帮助我。@SaurabhMahajan在这种情况下，请尝试对div应用overflow-y:scroll
。