html - 使用 css 固定表格前两列的位置

Question

我有一个动态生成的表格，表格列的数字可能很大，因此用户需要水平滚动才能看到所有列的数据。我的任务是，当用户想要查看其他列的数据时，我必须固定前 2 列。

到目前为止，我可以对前 2 列进行绝对定位，但其他列的定位不正确。我的最后输出如下:

我的代码如下:

HTML

<table id="teamTable" class="table data-table table-hover" ts-wrapper>
    <thead>
       <tr>
          <th class="table-col-xs table-col-border" rowspan="2">
              <input type="checkbox">
           </th>
           <th class="table-col-border" ts-default rowspan="2">
                Name
           </th>
           <th ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
               column 3
           </th>
           <th ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
               column 4
           </th>
           ................................   
      </tr>
       <tr>
           <th ng-repeat="" class="table-col-sm table-col-border text-center">
              column 3
           </th>
           <th ng-repeat="" class="table-col-sm table-col-border text-center">
              column 4
           </th>
            ..............................
       </tr>
    </thead>

     <tbody>
       <tr ng-repeat="" ts-repeat>
          <td class="table-col-xs table-col-border" rowspan="2">
              <input type="checkbox">
           </td>
           <td class="table-col-border" ts-default rowspan="2">
                User  Name
           </td>
           <td ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
               column 3
           </td>
           <td ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
               column 4
           </td>
           ................................   
      </tr>
    </tbody>
 </table>

CSS

/* first make some space using 'margin-left' */
table#teamTable {
   margin-left: 125px;
   margin-bottom: 20px;
}

/* first table heading */
table#teamTable > thead > tr:first-child > th:nth-child(1) {
   margin-left: -126px;
   position: absolute;
   z-index: 9999;
   overflow: hidden;
   background-color: #fff;
   height: 45%;
} 

/* second table heading */
table#teamTable > thead > tr:first-child  > th:nth-child(2) {
   position: absolute;
   margin-left: -76px;
   z-index: 9999;
   overflow: hidden;
   background-color: #fff;
   height: 45%;
   width: 75px;
} 

/* rest of the table heading */ 
table#teamTable > thead > tr:first-child  > th:nth-child(n+3) {
   position: relative;
} 

table#teamTable > thead > tr:first-child  > th  {
   position: relative;
} 

/* first table column */
table#teamTable > tbody > tr > td:nth-child(1) {
   position: absolute;
   margin-left: -126px;
   z-index: 9999;
   overflow: hidden;
   background-color: #fff;
   height: 50px;
} 

 /* second table column */
table#teamTable > tbody > tr > td:nth-child(2) {
   position: absolute;
   margin-left: -76px;
   width: 75px;
   z-index: 9999;
   overflow: hidden;
   background-color: #fff;
   height: 50px;
} 

/* rest of the table column */
table#teamTable > tbody > tr > td:nth-child(n + 3) {
   position: relative; 
}

plnkr code

Answer 1

用预定义的大小设置 tbody 的样式并使用 overflow-y: scroll;

检查这个 fiddle 和逻辑http://jsfiddle.net/kabircse/bo8bu0u3/1/

你也可以使用 fixedheadertable 固定的表头

  http://www.fixedheadertable.com/

另一个固定的例子http://codepen.io/ajkochanowicz/pen/KHdih