如何固定表格的标题行和标题列

程序员文章站 2023-12-31 18:06:46

网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考： untit...</div> <div class="content"> 网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考： <p><font style="background-color: #ff9900"><html><br><head><br><title>untitled document</title><br><meta http-equiv="content-type" content="text/html; charset=gb2312"><br></head><br><script><br>function syncscroll(obj)<br>{<br> y.innerhtml = obj.scrolltop;<br> x.innerhtml = obj.scrollleft;<br> scroll1.children[0].style.position = "relative";<br> scroll2.children[0].style.position = "relative";<br> scroll1.children[0].style.left = "-"+obj.scrollleft;<br> scroll2.children[0].style.top = "-"+obj.scrolltop;<br> <br>}<br></script><br><body><br><table border="0" cellpadding="0" cellspacing="0"><br> <tr><br> <td><br> </font></p> <p><font style="background-color: #ff9900"> <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666"><br> <colgroup><br> <col width="80" ><br> <col width="80" ><br> <col width="80" ><br> </colgroup><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> </table></font></p> <p><font style="background-color: #ff9900"> <br> </td><br> <td><br> <p id=scroll1 style="width:450;overflow:hidden "><br> </font></p> <p><font style="background-color: #ff9900"> <table style="width:900 " height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666"><br> <colgroup><br> <col width="150" ><br> <col width="150" ><br> <col width="150" ><br> <col width="150" ><br> <col width="150" ><br> </colgroup><br> <tr bgcolor="#ffffff"><br> <td> </td><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> <td> </td><br> </tr><br> </table></font></p> <p><font style="background-color: #ff9900"> <br> </p> <br> </td><br> </tr><br> <tr><br> <td align="left" valign="top"><br> <p id=scroll2 style="height:150;overflow-y:hidden;overflow-x:scroll"><br> </font></p> <p><font style="background-color: #ff9900"> <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666"><br> <colgroup><br> <col width="80" ><br> <col width="80" ><br> <col width="80" ><br> </colgroup></font></p> <p><font style="background-color: #ff9900"> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> </tr><br> </table></font></p> <p><font style="background-color: #ff9900"> <br> </p><br> </td><br> <td align="left" valign="top"><br> <p style="width:450;height:150;overflow:scroll " onscroll="javascript:syncscroll(this)"><br> </font></p> <p><font style="background-color: #ff9900"> <table style="width:900 " height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666"><br> <colgroup><br> <col width="150" ><br> <col width="150" ><br> <col width="150" ><br> <col width="150" ><br> <col width="150" ><br> </colgroup><br> <tr bgcolor="#ffffff"><br> <td width="100" height="20"> </td><br> <td> </td><br> <td> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td height="20"> </td><br> <td> </td><br> <td> </td><br> <td> </td><br> <td> </td><br> </tr><br> <tr bgcolor="#ffffff"><br> <td heig </font> </p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/.html"> </a> </p> <p> 下一篇： <a href="/article/.html"> </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2323826.html" target="_blank" title="如何固定表格的标题行和标题列"> <h2> 如何固定表格的标题行和标题列 </h2> </a> </li> <li> <a href="/article/2264921.html" target="_blank" title="vue+element创建动态的form表单及动态生成表格的行和列"> <h2> vue+element创建动态的form表单及动态生成表格的行和列 </h2> </a> </li> <li> <a href="/article/2264724.html" target="_blank" title="asp.net实现固定GridView标题栏的方法(冻结列功能)"> <h2> asp.net实现固定GridView标题栏的方法(冻结列功能) </h2> </a> </li> <li> <a href="/article/2130687.html" target="_blank" title="表格不知道是否做过行和列的隐藏如何快速取消隐藏行和列"> <h2> 表格不知道是否做过行和列的隐藏如何快速取消隐藏行和列 </h2> </a> </li> <li> <a href="/article/2106259.html" target="_blank" title="表格横跨多页如何让表格的标题在后继各页重复出现"> <h2> 表格横跨多页如何让表格的标题在后继各页重复出现 </h2> </a> </li> <li> <a href="/article/2077192.html" target="_blank" title="在用Word制作表格过程中如何将表的行与列转置"> <h2> 在用Word制作表格过程中如何将表的行与列转置 </h2> </a> </li> <li> <a href="/article/2003932.html" target="_blank" title="C#_Excel数据读取与写入_自定义解析封装类_支持设置标题行位置&使用excel表达式收集数据&单元格映射&标题映射&模板文件的参数数据替换（第二版-增加深度读取和更新功能）"> <h2> C#_Excel数据读取与写入_自定义解析封装类_支持设置标题行位置&使用excel表达式收集数据&单元格映射&标题映射&模板文件的参数数据替换（第二版-增加深度读取和更新功能） </h2> </a> </li> <li> <a href="/article/1950119.html" target="_blank" title="vue+element创建动态的form表单.以及动态生成表格的行和列"> <h2> vue+element创建动态的form表单.以及动态生成表格的行和列 </h2> </a> </li> <li> <a href="/article/1842259.html" target="_blank" title="表格较大而且跨页默认标题行不会自动重复到Word第二页如何解决"> <h2> 表格较大而且跨页默认标题行不会自动重复到Word第二页如何解决 </h2> </a> </li> <li> <a href="/article/1775043.html" target="_blank" title="使表格的标题列可左右拉伸jquery插件封装"> <h2> 使表格的标题列可左右拉伸jquery插件封装 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>