HTML with first column and first row locked

Question

i have one html file which was exported as HTML from Microsoft excel application, i wanted to freeze the first row and column in the html, when i tried to add position:fixed;, the size and alignment of the headers are getting changed. please advice how to get it done without having the alignment and size changed. i have pasted the source code of the html. it would be a great help for me, thanks in advance. david. enter image description here

<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]>&nbsp;&nbsp;<![endif]-->
<!--The following information was generated by Microsoft Excel's Publish as Web
Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS 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 FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>

</html>

AFAICS you want to have a scrollable table with the header staying fixed on the page and not scrolling away, right? — Axel Amthor, Jun 10 '15 at 15:14
Yes Axel, i want to have a scrollable table header staying fixed. — davidb, Jun 10 '15 at 15:16
http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling — divy3993, Jun 10 '15 at 15:18
I would go with this: [LINK](http://www.fixedheadertable.com/) — divy3993, Jun 10 '15 at 15:29

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

Well, If you are wanting the HTML Header Row and 1st column fixed, it is more circumspect than what you would think.

Step 1: Create a DIV containing a table with just the header row.
Set the DIV to Fixed and overflow X to show.
Create a DIV with a Table that contains only 1 column, it will contain your fixed 1st column.
Set the DIV to Fixed and the overflow Y to show
Create a DIV with a table that contains the remainder of the data.
Set the DIV to Fixed and the overflow to auto.

Now, if you want to have 1 X axis and 1 y axis scroll bar refer to this: Scroll 2 scrollbars with jquery the same time

If you need some example code, let me know.

edited May 23 '17 at 12:07

Community

1
1

answered Jun 10 '15 at 15:24

Rouse02

157
2
7

is not clear here how three different tables keep in sync column's width and row's height – Saic Siquot Jun 10 '15 at 15:33
Hi Rouse, Could you please give me some example code. – davidb Jun 10 '15 at 15:44
Will do, I have a project at home that implements this. I will post it then. – Rouse02 Jun 11 '15 at 17:01

HTML with first column and first row locked

1 Answers1