How to freeze the first row of html table using CSS and jQuery (without using any plugin) & width for is dynamic that is not fixed

Question

<html>
<head>
<style>


 .divclass {
    border: 1px solid #5e87b0;
    border-radius: 3px;
    display: none;
    float: right;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    width: 100%;
}

.innerheader {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(63, 76, 104, 1) 0%, rgba(53, 106, 160, 1) 100%) repeat scroll 0 0;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    margin: 0.25%;
    text-align: center;
}
.divborder {
    margin: 0.5% 2%;
    overflow: auto;
}
.tblborder {
    font-size: 14px;
    overflow-x: scroll;
}

.thclass, .thclass1 {
    background: #f2f2f2 none repeat scroll 0 0;
    border-radius: 2px;
    color: black;
    font-size: 14px;
    white-space: nowrap;
}

.thmainclass {
    background: #5e87b0 none repeat scroll 0 0;
    border-radius: 2px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

</style>
</head>
<body>
 <div class="divclass" style="display: block;"><h3 class="innerheader">sample table</h3>    
<table width="100%">

<tbody><tr>
<td>
<div class="divborder" style="">
    <table width="100%" height="" cellpadding="2" class="tblborder submittbl" id="processtbl">
                <tbody><tr height="30"><td class="thmainclass">No.</td><td class="thmainclass">Type</td><td class="thmainclass">Owner</td><td class="thmainclass">Process Hop #</td><td class="thmainclass">Task Name</td><td class="thmainclass">Type</td><td class="thmainclass">Automated?</td><td class="thmainclass">Depends on</td><td class="thmainclass">Validation</td><td class="thmainclass">On success</td><td class="thmainclass">On Faliure</td><td class="thmainclass">Category</td><td class="thmainclass">Type</td><td class="thmainclass">Item</td><td class="thmainclass">Summary</td><td class="thmainclass">Resolution Shift</td></tr>
                    <tr height="30"><td class="thclass" data-info="a" style="text-align:center">a</td><td class="thclass" data-info="fsda" style="text-align:center">fsda</td><td class="thclass" data-info="sfd" style="text-align:center">sfd</td><td class="thclass" data-info="asfdsadf" style="text-align:center">asfdsadf</td><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="afsd" style="text-align:center">afsd</td><td class="thclass" data-info="afsd" style="text-align:center">afsd</td><td class="thclass" data-info="sfad" style="text-align:center">sfad</td><td class="thclass" data-info="sfad" style="text-align:center">sfad</td><td class="thclass" data-info="sadf" style="text-align:center">sadf</td><td class="thclass" data-info="safdsfda" style="text-align:center">safdsfda</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="safd" style="text-align:center">safd</td><td class="thclass" data-info="fsad" style="text-align:center">fsad</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td><table class="btntbl"><tbody><tr><td><img width="20" height="20" class="leftimg editcls" src="css/images/edit.png"></td><td><img width="20" height="20" class="rightimg deletecls" src="css/images/deleteIcon.png"></td></tr></tbody></table></td></tr>
                        <tr height="30"><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="safd" style="text-align:center">safd</td><td class="thclass" data-info="ads" style="text-align:center">ads</td><td class="thclass" data-info="dffsa" style="text-align:center">dffsa</td><td class="thclass" data-info="fd" style="text-align:center">fd</td><td class="thclass" data-info="asd" style="text-align:center">asd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="sda" style="text-align:center">sda</td><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="sa" style="text-align:center">sa</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="as" style="text-align:center">as</td><td class="thclass" data-info="afdsdf" style="text-align:center">afdsdf</td><td class="thclass" data-info="sadf" style="text-align:center">sadf</td><td><table class="btntbl"><tbody><tr><td><img width="20" height="20" class="leftimg editcls" src="css/images/edit.png"></td><td><img width="20" height="20" class="rightimg deletecls" src="css/images/deleteIcon.png"></td></tr></tbody></table></td></tr>
                            <tr height="30"><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="safd" style="text-align:center">safd</td><td class="thclass" data-info="ads" style="text-align:center">ads</td><td class="thclass" data-info="dffsa" style="text-align:center">dffsa</td><td class="thclass" data-info="fd" style="text-align:center">fd</td><td class="thclass" data-info="asd" style="text-align:center">asd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="sda" style="text-align:center">sda</td><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="sa" style="text-align:center">sa</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="as" style="text-align:center">as</td><td class="thclass" data-info="afdsdf" style="text-align:center">afdsdf</td><td class="thclass" data-info="sadf" style="text-align:center">sadf</td><td><table class="btntbl"><tbody><tr><td><img width="20" height="20" class="leftimg editcls" src="css/images/edit.png"></td><td><img width="20" height="20" class="rightimg deletecls" src="css/images/deleteIcon.png"></td></tr></tbody></table></td></tr><tr height="30"><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="safd" style="text-align:center">safd</td><td class="thclass" data-info="ads" style="text-align:center">ads</td><td class="thclass" data-info="dffsa" style="text-align:center">dffsa</td><td class="thclass" data-info="fd" style="text-align:center">fd</td><td class="thclass" data-info="asd" style="text-align:center">asd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="sda" style="text-align:center">sda</td><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="sa" style="text-align:center">sa</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="as" style="text-align:center">as</td><td class="thclass" data-info="afdsdf" style="text-align:center">afdsdf</td><td class="thclass" data-info="sadf" style="text-align:center">sadf</td><td><table class="btntbl"><tbody><tr><td><img width="20" height="20" class="leftimg editcls" src="css/images/edit.png"></td><td><img width="20" height="20" class="rightimg deletecls" src="css/images/deleteIcon.png"></td></tr></tbody></table></td></tr>
                                <tr height="30"><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="safd" style="text-align:center">safd</td><td class="thclass" data-info="ads" style="text-align:center">ads</td><td class="thclass" data-info="dffsa" style="text-align:center">dffsa</td><td class="thclass" data-info="fd" style="text-align:center">fd</td><td class="thclass" data-info="asd" style="text-align:center">asd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="asfd" style="text-align:center">asfd</td><td class="thclass" data-info="sda" style="text-align:center">sda</td><td class="thclass" data-info="asdf" style="text-align:center">asdf</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="sa" style="text-align:center">sa</td><td class="thclass" data-info="asf" style="text-align:center">asf</td><td class="thclass" data-info="as" style="text-align:center">as</td><td class="thclass" data-info="afdsdf" style="text-align:center">afdsdf</td><td class="thclass" data-info="sadf" style="text-align:center">sadf</td><td><table class="btntbl"><tbody><tr><td><img width="20" height="20" class="leftimg editcls" src="css/images/edit.png"></td><td><img width="20" height="20" class="rightimg deletecls" src="css/images/deleteIcon.png"></td></tr></tbody></table></td></tr>
                                    </tbody></table></div>
                                </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

I want to make an html table with the first row frozen (so when you scroll down vertically you can always see it).

Is there a clever way to make this happen without any script using css only, and also I don't have to modifiy html structure.

http://jsfiddle.net/4wptzmeu/

My HTML table is in the above link.

no..actually in that example they put scroll inside table, but in my page I put scroll for div... — hardcode, Jul 01 '15 at 11:14
this question is not duplicate...I changed the question title — hardcode, Jul 02 '15 at 05:28

How to freeze the first row of html table using CSS and jQuery (without using any plugin) & width for is dynamic that is not fixed

0 Answers0