HTML Data Table with fixed header and fixed column

Question

I want to freeze the header and first two columns of the table in the attached picture. I have tried a few plugins but unable to achieve the result.

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; will helps you to make the position of .inner div as fixed

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

Answer 2

try to make a class with position: fixed; like this

.fixed {
 position: fixed;
}

then add it to the header of the table and the first two columns you want to be 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>