带固定标题和固定列的HTML数据表

Question

我想冻结附加图片中标题和表格的前两列。我尝试了一些插件，但无法实现结果。

CSS

.outer {position:relative} 
.inner { 
    overflow-x:scroll; 
    overflow-y:scroll; 
    height: 400px; 
    *width:91%; 
    *margin-left:100px; 
} 

HTML

<div class='outer'> 
    <div class='inner'> 
     <table id='MyTable' class='table table-striped table-bordered table-hover dataTable'> 
      <thead id='theadMR'></thead> 
      <tbody id='tbodyMR'></tbody> 
     </table> 
    </div> 
</div> 

Answer 1

position: fixed;将帮助您做出.inner div的位置固定

.inner{ 
position: fixed; 
top: 0px; 
} 

Answer 2

尽量让一类position: fixed;这样

.fixed { 
position: fixed; 
} 

然后将其添加到表的标题和要被固定

<div class='outer'> 
    <div class='inner'> 
     <table id='MyTable' class='table table-striped table-bordered table-hover dataTable'> 
     <thead id='theadMR' class='fixed'></thead> 
     <tbody id='tbodyMR'></tbody> 
     </table> 
    </div> 
</div>