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>

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

2 个答案: