冻结列的IE

Question

不工作我已经使用这个捣鼓创建： - fiddle used to make this

但我用列表的标签制作一张桌子和冻结前两列。第一列冻结，第二列也冻结，但第二列的头不冻结。 其工作中铬精绝而不是在IE

Click here for fiddle

<div class="container" style="margin-top:30px;position:relative;">   
     <ul class="testTable" id="table"> 
      <div class="testHeader">      
       <li class="testRow"> 
        <span>ID</span> 
        <span>Name</span> 
        <span>Description</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
        <span>Details</span> 
       </li> 
      </div> 
      <div class="testBody"> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3 a jghasd kahsdk asd ad as das dsadasdasdasdasdas</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
       <li class="testRow"> 
        <span>1</span> 
        <span>2</span> 
        <span>3</span> 
        <span>4</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
        <span>5</span> 
       </li> 
      </div> 
     </ul>  
</div> 

请帮助

Answer 1

这里头两列越来越冻结click here - Fiddle。我在.testTable添加table-layout: fixed或者多一个选择那里，更换宽度到最大宽度在.testHeader，我们得到欲望输出。它在铬，IE和Firefox中工作正常。

约table-layout: fixed请参考以下链接的详细信息：click here

$(document).ready(function() { 
 
      $('.testBody').scroll(function (e) { 
 
       $('.testHeader').css("left", -$(".testBody").scrollLeft()); 
 
       $('.testHeader span:first-child').css("left", $(".testBody").scrollLeft()); 
 
       $('.testBody span:first-child').css("left", $(".testBody").scrollLeft()); 
 
       $('.testHeader span:nth-child(2)').css("left", $(".testBody").scrollLeft()); 
 
       $('.testBody span:nth-child(2)').css("left", $(".testBody").scrollLeft()); 
 
      }); 
 
      var resizeCol = function() { 
 
       //var tiw = $('.table-body .table').width(); 
 
       //$('.table-head').width(tiw); 
 
       $('.testBody .testRow:first span').each(function (index, element) { 
 
        var w = $(this).css('width'), 
 
         i = $(this).index(); 
 
        //$('.testHeader span:eq(' + i + ')').width(w);     
 
        $('.testHeader span:eq(' + i + ')').css('min-width', w); 
 
       }); 
 
      } 
 
      resizeCol(); 
 
     });

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 14px; 
 
} 
 

 
#fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.testTable { 
 
    display: table; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: relative; 
 
    width: 700px; 
 
    table-layout: fixed; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 

 
} 
 

 
.testRow { 
 
    display: table-row; 
 
} 
 

 
    .testRow > span { 
 
     list-style: none; 
 
     display: table-cell; 
 
     border: 1px solid #fff; 
 
     padding: 2px 6px; 
 
    } 
 

 
.testHeader { 
 
    position: relative; 
 
    display: block; /*seperates the header from the body allowing it to be positioned*/ 
 
    width: 700px; 
 
    overflow: visible; 
 
    /*display: table-header-group;*/ 
 
} 
 

 
    .testHeader .testRow { 
 
     border-bottom: 1px solid #dedede; 
 
    } 
 

 
    .testHeader span { 
 
     background: #F9F9F9; 
 
     min-width: 120px; 
 
     height: 32px; 
 
     font-family: Arial; 
 
     font-weight: bold; 
 
     border: 1px solid #fff; 
 
    } 
 

 
     .testHeader span:first-child { 
 
      position: relative; 
 
      z-index:99; 
 
      border: 1px solid #fff; 
 
     } 
 

 
     .testHeader span:nth-child(2) { 
 
      position: relative; 
 
      border: 1px solid #fff; 
 
     } 
 

 
.testBody { 
 
    /*display: table-row-group;*/ 
 
    position: relative; 
 
    display: block; /*seperates the tbody from the header*/ 
 
    width: 700px; 
 
    height: 140px; 
 
    overflow: scroll; 
 
} 
 

 
    .testBody .testRow:nth-child(odd) { 
 
     background: #fff; 
 
    } 
 

 
     .testBody .testRow:nth-child(odd) span:nth-child(1) { 
 
      background: #fff; 
 
     } 
 

 
     .testBody .testRow:nth-child(odd) span:nth-child(2) { 
 
      background: #fff; 
 
     } 
 

 
    .testBody .testRow:nth-child(even) { 
 
     background: #f9f9f9; 
 
    } 
 

 
     .testBody .testRow:nth-child(even) span:nth-child(1) { 
 
      background: #f9f9f9; 
 
     } 
 

 
     .testBody .testRow:nth-child(even) span:nth-child(2) { 
 
      background: #f9f9f9; 
 
     } 
 

 
    .testBody span { 
 
     min-width: 120px; 
 
     /*max-width:120px;*/  
 
     word-wrap:break-word; 
 
     border: 1px solid #fff; 
 
    } 
 

 
     .testBody span:first-child { 
 
      position: relative; 
 
      /*display: block;*/ /*seperates the first column from the tbody*/ 
 
      height: 40px; 
 
     } 
 

 
     .testBody span:nth-child(2) { 
 
      position: relative; 
 
      height: 40px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" style="margin-top:30px;position:relative;">   
 
      <ul class="testTable" id="table"> 
 
       <div class="testHeader">      
 
        <li class="testRow"> 
 
         <span>ID</span> 
 
         <span>Name</span> 
 
         <span>Description</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
         <span>Details</span> 
 
        </li> 
 
       </div> 
 
       <div class="testBody"> 
 
        <li class="testRow"> 
 
         <span>1</span> 
 
         <span>2</span> 
 
         <span>3 a jghasd kahsdk asd ad as das dsadasdasdasdasdas</span> 
 
         <span>4</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
        </li> 
 
        <li class="testRow"> 
 
         <span>1</span> 
 
         <span>2</span> 
 
         <span>3</span> 
 
         <span>4</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
        </li> 
 
        <li class="testRow"> 
 
         <span>1</span> 
 
         <span>2</span> 
 
         <span>3</span> 
 
         <span>4</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
         <span>5</span> 
 
        </li> 
 
       </div> 
 
      </ul>  
 
    </div>