需要修復表中的左列

Question

大家好，我需要凍結表中的第一列。其餘列應該是可滾動的。
這裏是link

.tblRpt td{ padding:4px; color:#777;} 
.tblServerInfo{border-collapse: collapse; font-size:13px; margin-top:10px;} 
.tblServerInfo th{ background:#ececec; border:1px solid #dcdcdc; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; line-height:30px; } 
.tblServerInfo td{ border:1px solid #dcdcdc; line-height:20px; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; text-align:center; }  
.tblServerInfo .feature{ color:#333; font-size:14px; line-height:30px; font-weight:bold; padding-left:10px; text-align:left; text-shadow: 1px 1px 0px #fff;} 
.tblServerInfo .featureBody{ color:#333; font-size:13px; line-height:25px; padding-left:10px; text-align:left; } 
.tblServerInfo .rw{background:#f5f5f5;} 

.tblClass { 
      width: 600px; 
      overflow-x:scroll; 
      margin-left:5em; 
      overflow-y:visible; 
      padding-bottom:1px; 
     } 

/*--Tooltip Styles--*/ 
.tip_trigger{display:block; padding:6px;} 
.tip { 
    color: #333; 
    background:#ffffff; 
    border:1px solid #747474; 
    display:none; /*--Hides by default--*/ 
    padding:10px; 
    margin-left:-143px; 

    text-align:left; line-height:16px; 
    position:absolute; z-index:1000; 
    text-decoration:none; 
    cursor:auto; 
    -moz-box-shadow: 2px 2px 5px #a2a2a2;-webkit-box-shadow: 2px 2px 5px #a2a2a2;box-shadow: 2px 2px 5px #a2a2a2; 
} 

<div class="fLeft tblClass" style="margin:10px 0px 0px 0px;"> 

        <table class="tblServerInfo" width="100%"> 
        <thead> 
         <tr> 
          <th class="headcol feature"> 
           Server IP address 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.18 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.12 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 
          <th> 
           50.16.197.36 
          </th> 


         </tr> 
         </thead> 
         <tbody> 
         <tr style="background:#f5f5f5; line-height:40px;"> 
          <td class="headcol feature" >Server Service</td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
         </tr> 
         <tr> 
          <td class="featureBody headcol">Api_Deletion</td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
          <td></td> 
         </tr> 
         <tr> 
          <td class="featureBody headcol">Api_Deletion</td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
         </tr> 
         <tr> 
          <td class="featureBody headcol">Api_Deletion</td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td> 
          <td></td> 
          <td></td> 
          <td> 
          <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /> 
          <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span> 
          </a> 
          </td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
         </tr> 



         </tbody> 
        </table> 

Answer 1

td:nth-child(1){ 
position:fixed;} 

th:nth-child(1){ 
position:fixed;} 

，或者你可以用兩個表，而不是一個把第一列數據中第一個表和休息在第二

Answer 2

嘗試使用position:fixed

或

嘗試此鏈接

how do I create an HTML table with fixed/frozen left column and scrollable body?

Answer 3

嘗試用資料覈實工作。那麼你可以利用以下內容：

對於容器： overflow：scroll; 職位：固定;

The frozen div： position：absolute;

設置頂部和左側。