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

最新推荐文章于 2024-07-12 11:17:24 发布
最新推荐文章于 2024-07-12 11:17:24 发布
阅读量467 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5246/article/details/82445445
版权
Html:如何固定表格的标题行和标题列 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script>
function syncscroll(obj)
{
 //y.innerHTML = obj.scrollTop;
 //x.innerHTML = obj.scrollLeft;
 scroll1.children[0].style.position = "relative";
 scroll2.children[0].style.position = "relative";
 scroll1.children[0].style.left = "-"+obj.scrollLeft;
 scroll2.children[0].style.top =  "-"+obj.scrollTop;

}
</script>
<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
  <!--*********左上-BEGIN***********-->

  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="80" >
   <col width="80" >
   <col width="80" >
   </colgroup>
    <tr bgcolor="#FFFFFF">
   <td height="20">列1</td>
   <td>列2</td>
   <td>列3</td>
    </tr>
  </table>

  <!--**************左上-END**********-->
 </td>
    <td>
 <div id='scroll1' style="width:450;overflow:hidden ">
  <!--***********右上-BEGIN********-->

  <table style="width:900 " height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="150" >
   <col width="150" >
   <col width="150" >
   <col width="150" >
   <col width="150" >
   </colgroup>
    <tr bgcolor="#FFFFFF">
   <td>列4</td>
   <td height="20">列5</td>
   <td>列6</td>
   <td>列7</td>
   <td>列8</td>
    </tr>
  </table>

  <!--************右上-END**********-->
 </div> 
 </td>
  </tr>
  <tr>
    <td align="left" valign="top">
 <div id='scroll2' style="height:150;overflow-y:hidden;overflow-x:scroll">
  <!--*************左下-BEGIN**************-->

  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="80" >
   <col width="80" >
   <col width="80" >
   </colgroup>

    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
  </table>

  <!--*************左下-END***********-->
 </div>
 </td>
    <td align="left" valign="top">
 <div style="width:450;height:150;overflow:scroll " onscroll="javascript:syncscroll(this)">
  <!--***********右下-BEGIN***********-->

  <table style="width:900 " height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
  <colgroup>
  <col width="150" >
  <col width="150" >
  <col width="150" >
  <col width="150" >
  <col width="150" >
  </colgroup>
    <tr bgcolor="#FFFFFF">
   <td width="100" height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
  </table>

  <!--*************右下-END*****************-->
 </div>
 </td>
  </tr>
</table>
<p id="y"> </p>
<p id="x"> </p>
</body>
</html>

转载连接：
http://www.ninedns.com/html/20074221600272299.html
iteye_5246
关注
专栏目录
HTML固定Table标题行的四种方法
08-31
Javascript脚本实现HTML页面中表格Table的标题行固定位置，并与表格内容对齐。
html表格的标题怎么固定,javascript – 带有固定标题的HTML表格？
weixin_39813009的博客
06-10 128
我正在寻找一个解决方案这一段时间，发现大部分的答案是不工作或不适合我的情况，所以我写了一个简单的解决方案与jquery。这是解决方案大纲。>克隆表需要有固定的标题并放置克隆的复制在原始之上>从顶部表中删除表体>从底部表中删除表标题>调整列宽。 (我们记得原来的列宽)src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/...
html表格的标题怎么固定,如何创建具有固定标题但动态列的HTML表格
weixin_33398049的博客
06-10 179
你想是这样的：HTMLColumn AColumn B37JS$(function() {$("button").click(function (e) {var cols = $(this).val();// You'll want to do something here to get the column datavar data = $("").append($("Col 0"));for ...
html表格的标题怎么固定,Html:如何固定表格的标题行和标题列
weixin_29015483的博客
06-10 433
Html:如何固定表格的标题行和标题列Untitled Documentfunction syncscroll(obj){//y.innerHTML = obj.scrollTop;//x.innerHTML = obj.scrollLeft;scroll1.children[0].style.position = "relative";scroll2.children[0].style.posi...
html表格标题如何用代码写,通过技巧固定表格的标题列的代码_html
weixin_27889245的博客
07-01 377
table#headers {table-layout:fixed;background:#eea033;}table#data {table-layout:relative;background:#eea033;}td, th {vertical-align:top;background:#ffffff;}var rh;var fr;var ds;var hs;function syncScro...
HTML表格标记教程(15):表格的标题
12-14
通过这个标记可以直接添加表格的标题，而且可以控制标题文字的排列属性。 基本语法 … 语法解释 标记之间的就是标题的内容，这个标记使用在标记中. 文件范例：10—14.htm 通过标记设定表格的标题。01 <!– ——...
floater:JavaScript为表格创建浮动的固定标题和列
05-16
这是通过使用表标题，所有左列和左上角的副本作为左列的标题来实现的。 然后，根据元素和滚动方向，使用style.position值“ fixed”或“ absolute”将这些元素放在表格的顶部或左侧。 有关用法和实现的详细信息，...
jquery 固定表格标题和列
08-20
"jquery 固定表格标题和列"就是解决这一问题的一个实用方案，它利用JavaScript库jQuery来实现表格的动态固定效果，确保在滚动时标题和列始终保持可见，提高了用户体验。 1. **jQuery**：jQuery是一个高效、简洁且...
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
jquery固定表格行列
04-12
如何使用jquery固定表格行列，固定table表头。
HTML表格固定第一行第一列效果
11-06
在网页上实现类似Excel的效果，数据滚动条拖动固定第一行和第一列，附代码备注，一目了然
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
Html为表格添加标题和摘要
热门推荐
sang_12345的博客
07-31 1万+
1.添加摘要  语法：&lt;table summary="表格简介文本"&gt; 2.添加标题   语法： &lt;table&gt; &lt;caption&gt;标题文本&lt;/caption&gt; &lt;tr&gt; &lt;td&gt;…&lt;/td&gt; &lt;td&gt;…&am
HTML入门——常用标签之表格标签
m0_73887605的博客
07-21 624
表格标签也是一种复合标签。 由：table,tr,td,th,thead,tbody组合，由行和列组合成，行和列交叉的地方就是单元格 表格相关属性： table: border:边框 width:宽度 height:高度 align:整个表格的排版 left,center,right bgcolor:作用于整个表的背景颜色 tr:行 height:行高 bgcolor:作用于一整行的背景色 align:作用于一整行的内容的水平排版 left,center,right valign:作
HTML table、form表单标签的介绍
不定时分享最优质的网络技术与教程，满满的干货。
09-11 1078
本篇主要介绍 table、form标签以及表单提交方式。目录1. 标签：在HTML 中定义表格布局。2. 标签：用于创建 HTML 表单。3. 表单提交方式：介绍get、post方法。
【HTML入门】第十课 - 表格，也就是table标签
最新发布
xingyu_qie的专栏
07-12 1258
这一小节，我们说一下HTML中的表格。比如我们常常看见的学生成绩单，比如excel一个单元格一个单元格的，这些都是表格。表格的标签名是。
HTML表格使用全指南，真的很详细
(黎子)人生编码
06-20 2524
通过使用CSS媒体查询和JavaScript，开发者可以创建出既美观又实用的表格，确保用户在任何设备上都能获得良好的浏览体验。通过合理的语义化标签使用，开发者可以创建出既美观又易于理解的表格。通过使用适当的属性和技巧，我们可以提高表格的可访问性。通过CSS样式设计和布局控制，HTML表格不仅可以提供清晰的数据展示，还能成为网页上的美观元素。跨行和跨列是表格设计中常用的技术，用于合并单元格，使表格布局更加灵活和紧凑。控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。标签进行表格的语义化。
HTML固定标题列与表格头部代码示例
这篇文章提供了一套实现固定标题列和标题头的HTML表格的完整代码和相关样式，适合于需要创建响应式、具有一定交互性的网页表格布局。通过理解这些代码和样式，开发者可以灵活地应用于实际项目中，创建出符合需求的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值