Home > DeveloperSection > Forums > Table with fixed header and column on pure css
Ankita Pandey
Ankita Pandey

Total Post:183

Points:1285
Posted on    September-25-2013 7:43 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 3413  View(s)
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.



Pravesh Singh

Total Post:411

Points:2881
Posted on    September-25-2013 9:49 AM

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 :)


Don't want to miss updates? Please click the below button!

Follow MindStick