2015-06-10 42 views
1

我有一個html文件從Microsoft excel應用程序導出爲HTML,我想凍結html中的第一行和第一列,當我嘗試添加位置時:fixed;大小和標題的對齊正在改變。 請諮詢如何在沒有對齊和尺寸變化的情況下完成。 我已經粘貼了html的源代碼。 這對我很有幫助,在此先感謝。 david。 enter image description here第一列和第一行被鎖定的HTML

<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 
 
\t {mso-displayed-decimal-separator:"\."; 
 
\t mso-displayed-thousand-separator:"\,";} 
 
.xl1514759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:black; 
 
\t font-size:11.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:general; 
 
\t vertical-align:bottom; 
 
\t mso-background-source:auto; 
 
\t mso-pattern:auto; 
 
\t white-space:nowrap;} 
 
.xl6314759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:white; 
 
\t font-size:9.0pt; 
 
\t font-weight:700; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:left; 
 
\t vertical-align:middle; 
 
\t border:2.0pt double #3F3F3F; 
 
\t background:#4BACC6; 
 
\t mso-pattern:black none; 
 
\t white-space:normal;} 
 
.xl6414759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:white; 
 
\t font-size:9.0pt; 
 
\t font-weight:700; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:center; 
 
\t vertical-align:middle; 
 
\t border:2.0pt double #3F3F3F; 
 
\t background:#4BACC6; 
 
\t mso-pattern:black none; 
 
\t white-space:normal;} 
 
.xl6514759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:black; 
 
\t font-size:9.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:center; 
 
\t vertical-align:middle; 
 
\t border:.5pt solid windowtext; 
 
\t mso-background-source:auto; 
 
\t mso-pattern:auto; 
 
\t white-space:nowrap;} 
 
.xl6614759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:black; 
 
\t font-size:9.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:left; 
 
\t vertical-align:middle; 
 
\t border-top:.5pt solid windowtext; 
 
\t border-right:none; 
 
\t border-bottom:.5pt solid windowtext; 
 
\t border-left:none; 
 
\t mso-background-source:auto; 
 
\t mso-pattern:auto; 
 
\t white-space:nowrap;} 
 
.xl6714759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:black; 
 
\t font-size:9.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:left; 
 
\t vertical-align:middle; 
 
\t border-top:.5pt solid windowtext; 
 
\t border-right:none; 
 
\t border-bottom:.5pt solid windowtext; 
 
\t border-left:.5pt solid windowtext; 
 
\t mso-background-source:auto; 
 
\t mso-pattern:auto; 
 
\t white-space:nowrap;} 
 
.xl6814759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:black; 
 
\t font-size:9.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:"\#\,\#\#0_\)\;\\\(\#\,\#\#0\\\)"; 
 
\t text-align:center; 
 
\t vertical-align:middle; 
 
\t border-top:.5pt solid windowtext; 
 
\t border-right:.5pt solid windowtext; 
 
\t border-bottom:.5pt solid windowtext; 
 
\t border-left:1.0pt solid windowtext; 
 
\t mso-background-source:auto; 
 
\t mso-pattern:auto; 
 
\t white-space:nowrap;} 
 
.xl6914759 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:white; 
 
\t font-size:9.0pt; 
 
\t font-weight:700; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:center; 
 
\t vertical-align:middle; 
 
\t border-top:1.0pt solid windowtext; 
 
\t border-right:.5pt solid windowtext; 
 
\t border-bottom:.5pt solid windowtext; 
 
\t border-left:1.0pt solid windowtext; 
 
\t background:#4BACC6; 
 
\t mso-pattern:black none; 
 
\t 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>

+0

據我所知,你不能只使用CSS和HTML。 – putvande

+0

AFAICS你想擁有一個可滾動的表格,並且頁面在頁面上固定並且不會滾動,對吧? –

+0

是的阿克塞爾,我想有一個可滾動的表頭保持不變。 – davidb

回答

0

好吧,如果你想要的HTML標題行第一列固定的,它比你會覺得更加謹慎。

  1. 第1步:創建一個包含只有標題行的表的DIV。
  2. 將DIV設置爲固定並溢出X以顯示。
  3. 使用僅包含1列的表創建DIV,它將包含固定的第1列。
  4. 將DIV設置爲Fixed並將溢出Y顯示爲
  5. 使用包含其餘數據的表創建DIV。
  6. 將DIV設置爲固定,並將溢出設置爲自動。

現在,如果你想有1 X軸和1個Y軸滾動條是指這樣:Scroll 2 scrollbars with jquery the same time

如果你需要一些示例代碼,讓我知道。

+0

在這裏不清楚如何三個不同的表保持同步列的寬度和行的高度 –

+0

嗨Rouse,你能給我一些示例代碼。 – davidb

+0

會這樣做,我在家裏有一個項目實現了這個。然後我會發布它。 – Rouse02

相關問題