Table with fixed header and column on pure css

Total Post:183

Points:1285
 5157  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. 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 :)

      Modified On Mar-31-2018 01:59:23 AM

Answer

NEWSLETTER

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