---
title: "Table with fixed header and column on pure css"  
description: "Table with fixed header and column on pure css"  
author: "Anonymous User"  
published: 2013-09-25  
updated: 2013-09-25  
canonical: https://www.mindstick.com/forum/1533/table-with-fixed-header-and-column-on-pure-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Table with fixed header and column on pure css

I need to create a [html](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) (or something similar looking) with a [fixed header](https://www.mindstick.com/forum/158653/how-can-you-create-a-fixed-header-that-remains-at-the-top-of-the-page-even-when-scrolling) and a fixed first column.

Every solution I've seen so far uses [javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) or jQuery to set scrollTop/scrollLeft, but it doesn't work smoothly on [mobile](https://www.mindstick.com/articles/310668/reasons-why-you-should-choose-custom-mobile-app-development-for-your-business) browsers, so I'm looking for a pure [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) solution.

I want it to work on webkit browsers or use some [CSS3](https://www.mindstick.com/articles/1534/stylish-css3-progress-bars) [features](https://www.mindstick.com/articles/12993/5-advanced-features-for-your-odoo-ecommerce-theme), but I [repeat](https://www.mindstick.com/forum/156775/give-an-example-of-the-linq-repeat-method), I don't want to use javascript for scrolling.

## Replies

### Reply by Pravesh Singh

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


---

Original Source: https://www.mindstick.com/forum/1533/table-with-fixed-header-and-column-on-pure-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.