forum

Home / DeveloperSection / Forums / Table with fixed header and column on pure css

Ask Question

Table with fixed header and column on pure css

Anonymous User 6720 25-Sep-2013

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.

css-css3 css-css3 
Updated on 25-Sep-2013
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Pravesh Singh

Pravesh Singh

25-Sep-2013
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 :)

Liked By