个人中心
gpt4 book ai didi

javascript - 第一列和第一行被锁定的 HTML

转载 作者：太空宇宙 更新时间：2023-11-03 17:30:07 27 4
gpt4 key购买 nike

我有一个 html 文件，它是从 Microsoft excel 应用程序导出为 HTML 的，我想卡住 html 中的第一行和第一列，当我尝试添加 position:fixed; 时，标题的大小和对齐方式越来越变了。请建议如何在不更改对齐方式和大小的情况下完成它。我已经粘贴了html的源代码。这对我有很大的帮助，在此先感谢。大卫。 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>

最佳答案

好吧，如果您希望固定 HTML 标题行和第一列，这比您想象的要谨慎。

  1. 第 1 步:创建一个包含只有标题行的表格的 DIV。
  2. 将 DIV 设置为 Fixed 并溢出 X 以显示。
  3. 使用仅包含 1 列的表创建一个 DIV，它将包含固定的第 1 列。
  4. 设置DIV为Fixed，设置溢出Y为显示
  5. 使用包含剩余数据的表创建一个 DIV。
  6. 将 DIV 设置为 Fixed，将 overflow 设置为 auto。

现在，如果你想要 1 个 X 轴和 1 个 Y 轴滚动条，请引用:Scroll 2 scrollbars with jquery the same time

如果您需要一些示例代码，请告诉我。

关于javascript - 第一列和第一行被锁定的 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30760401/

27 4 0
文章推荐： c# - 如何将文件夹上传到 Azure 存储
文章推荐： c# - 获取字符串数组中匹配元素的所有索引
文章推荐： c# - Azure功能与Servicebus如何不将消息标记为完成
文章推荐： jquery - 为什么这个 Cycle 2 malsup jquery carousel 不能使用链接？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com