HTML table fixed header by using css

Question

I have an html file as inserted in the image file and i have to make the heading of it fixed and the rest table scrollable by using CSS.

I found the css to do that but my problem is that after inserting the css in html file the formatting for the header and data does not match .Suggest me whats wrong in my css my css is as following.

I want my formatting should not be disturbed only the header should be fixed up.

<style type="text/css">
div.tableContainer 
{
    clear: both;
    border: 1px solid #963;
    height: 300px;
    overflow: hidden;
    width: 1000px
}

html>body thead.fixedHeader tr 
{
    display: block
}

thead.fixedHeader th 
{

    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
    position: relative
    width: 200px

}

html>body tbody.scrollContent {
    display: block;
    height: 300px;
    overflow: auto;
    width: 100%

}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {

    background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px

}

html>body thead.fixedHeader th +th {
    width: 50px
}


</style>

enter image description here this is the image for html file i was not able to insert the source code of it.

Something like this? http://stackoverflow.com/a/17828082/1542290 — Mr. Alien, Oct 22 '13 at 09:34
Or like this ? http://jsfiddle.net/vkhNC/ Stackoverflow:http://stackoverflow.com/questions/15811653/table-with-fixed-header-and-column-on-pure-css — Timo Jungblut, Oct 22 '13 at 09:43
OP, you tagged your question [tag:html5] but your screenshot clearly show that you're using IE6...Are you targeting HTML5 or are you targeting IE6? — Passerby, Oct 22 '13 at 09:57

score 0 · Accepted Answer · answered Nov 07 '13 at 13:01

0

add margin to table like jsfiddle.net/h5t98/

table
{
    margin-top: 26px;
    width: 138px;
}
.month
{
    width: 79px;
}
.saving
{
    width:49px;
}

I have given fixed column width you can change according to your max column width.

answered Nov 07 '13 at 13:01

Gaurav Shekhadiya

106
1
3

HTML table fixed header by using css

1 Answers1