TABLE WITH FIXED HEADER AND COLUMN ON PURE CSS

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
 4691  View(s)
Ratings:
Rate this:

I need to create a html table (or something similar looking) with a fixed header and a fixed first column.

Every solution I've seen so far uses javascript or jQuery to set scrollTop/scrollLeft, but it doesn't work smoothly on mobile browsers, so I'm looking for a pure CSS solution.

I want it to work on webkit browsers or use some CSS3 features, but I repeat, I don't want to use javascript for scrolling.

  1. Pravesh Singh

    Post:412

    Points:2888
    Re: Table with fixed header and column on pure css

    Hi Ankita,

    I have hardcoded the titles like so:

    <table id="left_table" class="freeze_table">

        <tr class='tblTitle'>

             <th>Title 1</th>

             <th>Title 2</th>

        </tr>

    </table>

    And I added some styles as well.

    .tblTitle{

       position:absolute;

        top:0px;

        margin-bottom:30px;

        background:lightblue;

    }

    td, th{

        padding:5px;

        height:40px;

        width:40px;

        font-size:14px;

    }

    Hope this is what you want :)

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!