javascript - HTML with first column and first row locked -
i have 1 html file exported html microsoft excel application, wanted freeze first row , column in html, when tried add position:fixed;, size , alignment of headers getting changed. please advice how done without having alignment , size changed. have pasted source code of html. great me, in advance. david. 
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/tr/rec-html40"> <head> <meta http-equiv=content-type content="text/html; charset=windows-1252"> <meta name=progid content=excel.sheet> <meta name=generator content="microsoft excel 14"> <style id="store-freeze_14759_styles"> <!--table {mso-displayed-decimal-separator:"\."; mso-displayed-thousand-separator:"\,";} .xl1514759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:black; font-size:11.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:general; vertical-align:bottom; mso-background-source:auto; mso-pattern:auto; white-space:nowrap;} .xl6314759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:white; font-size:9.0pt; font-weight:700; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:left; vertical-align:middle; border:2.0pt double #3f3f3f; background:#4bacc6; mso-pattern:black none; white-space:normal;} .xl6414759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:white; font-size:9.0pt; font-weight:700; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:center; vertical-align:middle; border:2.0pt double #3f3f3f; background:#4bacc6; mso-pattern:black none; white-space:normal;} .xl6514759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:black; font-size:9.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:center; vertical-align:middle; border:.5pt solid windowtext; mso-background-source:auto; mso-pattern:auto; white-space:nowrap;} .xl6614759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:black; font-size:9.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:left; vertical-align:middle; border-top:.5pt solid windowtext; border-right:none; border-bottom:.5pt solid windowtext; border-left:none; mso-background-source:auto; mso-pattern:auto; white-space:nowrap;} .xl6714759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:black; font-size:9.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:left; vertical-align:middle; border-top:.5pt solid windowtext; border-right:none; border-bottom:.5pt solid windowtext; border-left:.5pt solid windowtext; mso-background-source:auto; mso-pattern:auto; white-space:nowrap;} .xl6814759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:black; font-size:9.0pt; font-weight:400; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:"\#\,\#\#0_\)\;\\\(\#\,\#\#0\\\)"; text-align:center; vertical-align:middle; border-top:.5pt solid windowtext; border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext; border-left:1.0pt solid windowtext; mso-background-source:auto; mso-pattern:auto; white-space:nowrap;} .xl6914759 {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:white; font-size:9.0pt; font-weight:700; font-style:normal; text-decoration:none; font-family:calibri, sans-serif; mso-font-charset:0; mso-number-format:general; text-align:center; vertical-align:middle; border-top:1.0pt solid windowtext; border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext; border-left:1.0pt solid windowtext; background:#4bacc6; mso-pattern:black none; white-space:normal;} --> </style> </head> <body> <!--[if !excel]> <![endif]--> <!--the following information generated microsoft excel's publish web page wizard.--> <!--if same item republished excel, information between div tags replaced.--> <!-----------------------------> <!--start of output excel publish web page wizard --> <!-----------------------------> <div id="store-freeze_14759" align=center x:publishsource="excel"> <table border=0 cellpadding=0 cellspacing=0 width=355 style='border-collapse: collapse;table-layout:fixed;width:267pt'> <col width=51 style='mso-width-source:userset;mso-width-alt:1865;width:38pt'> <col width=46 style='mso-width-source:userset;mso-width-alt:1682;width:35pt'> <col width=176 style='mso-width-source:userset;mso-width-alt:6436;width:132pt'> <col width=82 style='mso-width-source:userset;mso-width-alt:2998;width:62pt'> <tr height=66 style='height:49.5pt'> <td height=66 class=xl6414759 width=51 style='height:49.5pt;width:38pt'>sl.no</td> <td class=xl6314759 width=46 style='border-left:none;width:35pt'>type</td> <td class=xl6314759 width=176 style='border-left:none;width:132pt'>location</td> <td class=xl6914759 width=82 style='width:62pt'>brand</td> </tr> <tr height=21 style='height:15.75pt'> <td height=21 class=xl6514759 style='height:15.75pt'>1</td> <td class=xl6614759>s1</td> <td class=xl6714759>india</td> <td class=xl6814759 style='border-top:none'>3g</td> </tr> <tr height=20 style='height:15.0pt'> <td height=20 class=xl6514759 style='height:15.0pt;border-top:none'>2</td> <td class=xl6614759 style='border-top:none'>s1</td> <td class=xl6714759 style='border-top:none'>india</td> <td class=xl6814759 style='border-top:none'>3g</td> </tr> <tr height=20 style='height:15.0pt'> <td height=20 class=xl6514759 style='height:15.0pt;border-top:none'>3</td> <td class=xl6614759 style='border-top:none'>s1</td> <td class=xl6714759 style='border-top:none'>india</td> <td class=xl6814759 style='border-top:none'>3g</td> </tr> <![if supportmisalignedcolumns]> <tr height=0 style='display:none'> <td width=51 style='width:38pt'></td> <td width=46 style='width:35pt'></td> <td width=176 style='width:132pt'></td> <td width=82 style='width:62pt'></td> </tr> <![endif]> </table> </div> <!-----------------------------> <!--end of output excel publish web page wizard--> <!-----------------------------> </body> </html>
well, if wanting html header row , 1st column fixed, more circumspect think.
- step 1: create div containing table header row.
- set div fixed , overflow x show.
- create div table contains 1 column, contain fixed 1st column.
- set div fixed , overflow y show
- create div table contains remainder of data.
- set div fixed , overflow auto.
now, if want have 1 x axis , 1 y axis scroll bar refer this: scroll 2 scrollbars jquery same time
if need example code, let me know.
Comments
Post a Comment