HTML с первым столбцом и первой строкой заблокирован

У меня есть один html-файл, который был экспортирован как HTML из приложения Microsoft excel, я хотел заморозить первую строку и столбец в html, когда я попытался добавить позицию: fixed ;, размер и выравнивание заголовков меняются. , пожалуйста, совет, как это сделать без изменения выравнивания и размера. Я вставил исходный код html. это было бы большой помощью для меня, спасибо заранее. Давид. 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>

источник

2015-06-10 davidb

Насколько я знаю, вы не можете использовать только CSS и HTML. – putvande

AFAICS вы хотите иметь прокручиваемую таблицу с заголовком, остающимся фиксированным на странице и не прокручивающимся прочь, не так ли? –

Да Axel, я хочу, чтобы прокручиваемый заголовок таблицы оставался фиксированным. – davidb

Ну, если вы желая HTML заголовок строки и первого столбца фиксированной, более осмотрительны, чем вы могли бы подумать.

Шаг 1: Создайте DIV, содержащий таблицу с только строкой заголовка.
Установите DIV в положение Fixed и overflow X, чтобы показать.
Создайте DIV с таблицей, содержащей только 1 столбец, она будет содержать фиксированный 1-й столбец.
Установите DIV в положение Fixed и переполнение Y для отображения
Создайте DIV с таблицей, содержащей оставшуюся часть данных.
Установите DIV на Fixed и переполнение на авто.

Теперь, если вы хотите иметь 1 ось X и 1 у бара оси прокрутки относятся к этому: Scroll 2 scrollbars with jquery the same time

Если вам нужен какой-то пример кода, дайте мне знать.

источник

2015-06-10 15:24:23 Rouse02

здесь неясно, как три разные таблицы сохраняют ширину столбца и высоту строки –

Привет, Рауз, не могли бы вы дать мне некоторый пример кода. – davidb

Будет, у меня есть проект дома, который реализует это. Тогда я отправлю его. – Rouse02

HTML с первым столбцом и первой строкой заблокирован

ответ

Смежные вопросы