使用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;

检查这个小提琴和逻辑redis-server

您还可以使用使用fixedheadertable修复的表头

http://jsfiddle.net/kabircse/bo8bu0u3/1/

固定 http://www.fixedheadertable.com/

的另一个例子