Wednesday 16 April 2014

freeze table header and left column


While i am freeze table header or first column , Google to find .There are lot's of way to do it. I try via jquery but it conflict some existing js. After spanding a 2-3 day find a script to do this and optimize to less and it's work there are 5-6 number of line in JavaScript and some css.it's run without any conflict or error and working on all browser.

If you would like to create a table with scrollable data. I have to freeze the first header row and first column of the table.Below is example :-
style.css
.midcontainer {
 width: 100%;
 height: 200px;
 table-layout: fixed;
}

table.root {
 table-layout: fixed;
 width: 100%;
}

table.content {
 table-layout: fixed;
 width: 100%;
}

table.head {
 table-layout: fixed;
 width: 1890px;
}

table.frozen {
 table-layout: fixed;
 width: 100%;
}

.horizontal-scroll {
 width: 98%;
 height: 22px;
 overflow: hidden;
 overflow-x: scroll;
}

.horizontal-scroll div {
 width: 2173px;
 height: 1px;
}

.vertical-scroll {
 height: 200px;
 width: 22px;
 overflow: hidden;
 overflow-y: scroll;
 /* border: solid 1px #666; */
}

.vertical-scroll div {
 height: 377px;
 width: 1px;
}

.columnStyle {
 padding: 3px;
 height: 28px;
 border-collapse: separate;
 border-color: -moz-use-text-color #CCCCCC #CCCCCC -moz-use-text-color;
 border-style: none dotted solid none;
 border-width: 0 1px 1px 0;
 border-color: -moz-use-text-color #CCCCCC #CCCCCC -moz-use-text-color;
 border-style: none dotted solid none;
 width: 200px;
 overflow: hidden;
 text-overflow: ellipses;
 white-space: nowrap;
}

td {
 border-left: none;
 width: 100 px;
 text-align: left;
}

td.head {
 background-color: #CAEBFA;
}

div.root {
 margin-left: 0px;
 overflow: hidden;
 width: 100%;
 height: 28px;
}

.frozen {
 overflow: hidden;
 width: 100%;
 height: 200px;
}

.divhead {
 overflow: hidden;
 height: 28px;
 width: 100%;
}

.content {
 height: 200px;
 overflow-x: hidden;
 overflow-y: auto;
 width: 100%;
 width: 100%;
}

.tableumn {
 width: 150px;
}

.tablecontent {
 width: 501px;
}

.tableverticalscroll {
 width: 2px;
}
Scroll.html



Freeze Table Header And Left Column


 

Name
Arun
Aryan
Jessica
Renu
Manisha
Arrus
Rehan
Riyaj
Palak
Jessica

Class Roll No Ref City H.No Country Opening Timing Closing Timing Section Other
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ
9th 10 Test Chandigrah #32 India 09:10am 05:30pm XXX ZZZ



:) Done May be this help you and save some value able time

below is image while run:-

2 comments: