Table with fixed header and column on pure css

Anonymous User 7281 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.

Ask by Anonymous User

Updated 25 Sep 2013

1 Answers

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

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

Table with fixed header and column on pure css

Can you answer this question?

1 Answers