Fixed scroll at html table header without disturbing header size

Question

I am trying to fix the header of html table and scroll the rest of the table body. For fixing the column i am using the following css but the problem is that its disturbing the column size of the header .

    <style type="text/css">
      div.tableContainer 
       {
        clear: both;
        border: 1px solid #963;
        height: 300px;
        overflow: hidden;
        width: 1000px
       }

        html>body thead.fixedHeader tr 
        {
        display: block
       }


   thead.fixedHeader th 
    {

        background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
        position: relative
        width: 200px

    }

        html>body tbody.scrollContent {
        display: block;
        height: 300px;
        overflow: auto;
        width: 100%

       }

     tbody.scrollContent td, tbody.scrollContent tr.normalRow td {

        background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
        padding: 2px 3px 3px 4px

      }

       html>body thead.fixedHeader th +th {
    width: 50px
       }


     </style>

Answer 1

Related posts

1) Table with fixed header and fixed column on pure css

2) Scrollable table

3) How to display scroll bar onto a html table

4) Various Tables also there are some of them - with fixed header css you can find in html page if you inspect it

hope it would help you

Answer 2

Put the header in a separate table and the content in another, but position both the tables together so that it looks like one table.

<table>
put headers here.
</table>
<table>
put content here.
</table>

Answer 3

Try using css property overflow:overlay