[HTML]TABLE固定表头和行头

最新推荐文章于 2024-04-28 14:57:52 发布
最新推荐文章于 2024-04-28 14:57:52 发布
阅读量1.2w 收藏 2
点赞数
分类专栏： 网页专区 文章标签： table html border class 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szwangdf/article/details/2750468
版权

 TABLE固定表头和行头

 

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style>
  7.     body{font-size:12px;}
  8.     .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
  9.     .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
  10.     .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
  11.     .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
  12.     .dd{height:200px!important; height:208px; overflow-y:hidden;}
  14.     .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
  15.     .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
  16.     .ee{width:618px!important; width:620px}
  17.     .t_i_h table{width:600px;}
  18.     .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
  19.     .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
  20.     .cc table{width:600px; }
  21.     .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
  22. </style>
  23. <script>
  24.   function aa(){
  25.      var a=document.getElementById("cc").scrollTop;
  26.      var b=document.getElementById("cc").scrollLeft;
  27.       document.getElementById("dd").scrollTop=a;
  28.       document.getElementById("hh").scrollLeft=b;
  29.   }
  30. </script>
  31. </head>
  33. <body>
  34. <div class="t_n">
  35.     <span>序号</span>
  36.     <div class="dd" id="dd">
  37.         <table cellpadding="0" cellspacing="0" border="0" class="t_number">
  38.             <tbody>
  39.                 <tr>
  40.                 <td>1</td>
  41.                 </tr>
  42.                 <tr>
  43.                 <td>2</td>
  44.                 </tr>
  45.                 <tr>
  46.                 <td>3</td>
  47.                 </tr>
  48.                 <tr>
  49.                 <td>4</td>
  50.                 </tr>
  51.                 <tr>
  52.                 <td>5</td>
  53.                 </tr>
  54.                 <tr>
  55.                 <td>6</td>
  56.                 </tr>
  57.                 <tr>
  58.                 <td>7</td>
  59.                 </tr>
  60.                 <tr>
  61.                 <td>8</td>
  62.                 </tr>
  63.                 <tr>
  64.                 <td>9</td>
  65.                 </tr>
  66.                 <tr>
  67.                 <td>10</td>
  68.                 </tr>
  69.                 <tr>
  70.                 <td>11</td>
  71.                 </tr>
  72.                 <tr>
  73.                 <td>12</td>
  74.                 </tr>
  75.                 <tr>
  76.                 <td>13</td>
  77.                 </tr>
  78.                 <tr>
  79.                 <td>14</td>
  80.                 </tr>
  81.                 <tr>
  82.                 <td>15</td>
  83.                 </tr>
  84.                 <tr>
  85.                 <td>16</td>
  86.                 </tr>
  87.                 <tr>
  88.                 <td>17</td>
  89.                 </tr>
  90.                 <tr>
  91.                 <td>18</td>
  92.                 </tr>
  93.                 <tr>
  94.                 <td>19</td>
  95.                 </tr>
  96.                 <tr>
  97.                 <td>20</td>
  98.                 </tr>
  99.             </tbody>
  100.         </table>
  101.     </div>
  102. </div>
  103. <!--table栏目-->
  104. <div class="t_i">
  105.     <div class="t_i_h" id="hh">
  106.         <div class="ee">
  107.             <table cellpadding="0" cellspacing="0" border="0">
  108.              <tr>
  109.                <td width="10%">栏目A</td>
  110.                <td width="20%">栏目B</td>
  111.                <td width="10%">栏目C</td>
  112.                <td width="20%">栏目D</td>
  113.                <td width="20%">栏目E</td>
  114.                <td width="20%">栏目F</td>
  115.              </tr>
  116.             </table>
  117.         </div>
  118.     </div>
  119.     <div class="cc" id="cc" onscroll="aa()">
  120.         <table cellpadding="0" cellspacing="0" border="0">
  121.             <tr>
  122.                 <td width="10%">1</td>
  123.                 <td width="20%">1</td>
  124.                 <td width="10%">1</td>
  125.                 <td width="20%">1</td>
  126.                 <td width="20%">1</td>
  127.                 <td width="20%">1</td>
  128.             </tr>
  129.             <tr>
  130.                 <td>2</td>
  131.                 <td>2</td>
  132.                 <td>2</td>
  133.                 <td>2</td>
  134.                 <td>2</td>
  135.                 <td>2</td>
  136.             </tr>
  137.             <tr>
  138.                 <td>3</td>
  139.                 <td>3</td>
  140.                 <td>3</td>
  141.                 <td>3</td>
  142.                 <td>3</td>
  143.                 <td>3</td>
  144.             </tr>
  145.             <tr>
  146.                 <td>4</td>
  147.                 <td>4</td>
  148.                 <td>4</td>
  149.                 <td>4</td>
  150.                 <td>4</td>
  151.                 <td>4</td>
  152.             </tr>
  153.             <tr>
  154.                 <td>5</td>
  155.                 <td>5</td>
  156.                 <td>5</td>
  157.                 <td>5</td>
  158.                 <td>5</td>
  159.                 <td>5</td>
  160.             </tr>
  161.             <tr>
  162.                 <td>6</td>
  163.                 <td>6</td>
  164.                 <td>6</td>
  165.                 <td>6</td>
  166.                 <td>6</td>
  167.                 <td>6</td>
  168.             </tr>
  169.             <tr>
  170.                 <td>7</td>
  171.                 <td>7</td>
  172.                 <td>7</td>
  173.                 <td>7</td>
  174.                 <td>7</td>
  175.                 <td>7</td>
  176.             </tr>
  177.             <tr>
  178.                 <td>8</td>
  179.                 <td>8</td>
  180.                 <td>8</td>
  181.                 <td>8</td>
  182.                 <td>8</td>
  183.                 <td>8</td>
  184.             </tr>
  185.             <tr>
  186.                 <td>9</td>
  187.                 <td>9</td>
  188.                 <td>9</td>
  189.                 <td>9</td>
  190.                 <td>9</td>
  191.                 <td>9</td>
  192.             </tr>
  193.             <tr>
  194.                 <td>10</td>
  195.                 <td>10</td>
  196.                 <td>10</td>
  197.                 <td>10</td>
  198.                 <td>10</td>
  199.                 <td>10</td>
  200.             </tr>
  201.             <tr>
  202.                 <td>11</td>
  203.                 <td>11</td>
  204.                 <td>11</td>
  205.                 <td>11</td>
  206.                 <td>11</td>
  207.                 <td>11</td>
  208.             </tr>
  209.             <tr>
  210.                 <td>12</td>
  211.                 <td>12</td>
  212.                 <td>12</td>
  213.                 <td>12</td>
  214.                 <td>12</td>
  215.                 <td>12</td>
  216.             </tr>
  217.             <tr>
  218.                 <td>13</td>
  219.                 <td>13</td>
  220.                 <td>13</td>
  221.                 <td>13</td>
  222.                 <td>13</td>
  223.                 <td>13</td>
  224.             </tr>
  225.             <tr>
  226.                 <td>14</td>
  227.                 <td>14</td>
  228.                 <td>14</td>
  229.                 <td>14</td>
  230.                 <td>14</td>
  231.                 <td>14</td>
  232.             </tr>
  233.             <tr>
  234.                 <td>15</td>
  235.                 <td>15</td>
  236.                 <td>15</td>
  237.                 <td>15</td>
  238.                 <td>15</td>
  239.                 <td>15</td>
  240.             </tr>
  241.             <tr>
  242.                 <td>16</td>
  243.                 <td>16</td>
  244.                 <td>16</td>
  245.                 <td>16</td>
  246.                 <td>16</td>
  247.                 <td>16</td>
  248.             </tr>
  249.             <tr>
  250.                 <td>17</td>
  251.                 <td>17</td>
  252.                 <td>17</td>
  253.                 <td>17</td>
  254.                 <td>17</td>
  255.                 <td>17</td>
  256.             </tr>
  257.             <tr>
  258.                 <td>18</td>
  259.                 <td>18</td>
  260.                 <td>18</td>
  261.                 <td>18</td>
  262.                 <td>18</td>
  263.                 <td>18</td>
  264.             </tr>
  265.             <tr>
  266.                 <td>19</td>
  267.                 <td>19</td>
  268.                 <td>19</td>
  269.                 <td>19</td>
  270.                 <td>19</td>
  271.                 <td>19</td>
  272.             </tr>
  273.             <tr>
  274.                 <td>20</td>
  275.                 <td>20</td>
  276.                 <td>20</td>
  277.                 <td>20</td>
  278.                 <td>20</td>
  279.                 <td>20</td>
  280.             </tr>
  281.         </table>
  282.     </div>
  283. </div>
  284. </body>
  285. </html>
逐浪_一生悬命
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css固定表头、行头样式代码
09-25
在网页设计中，有时我们需要创建一个表格，其中包含固定的表头和行头，即使当用户滚动页面时，这些头部仍然可见。CSS（层叠样式表）提供了一种优雅的方式来实现这种效果，使得用户在查看大量数据时能更容易地导航。...
HTML中的table表
YJT180的博客
09-28 435
table表的概念 与数据库中的table表有所不同，html中的表虽然也用于统计数据，但其可以更加自由的定义表的格式形状 HTML中表的制作 table标签 如果想要在html中创建一个表，那么我们第一步就是使用table标签，这个标签囊括了整个表的全部内容，例如 <!DOCTYPE html> <html> <head> ...
自己造轮子之如何用HTML+JS搭建表头/列固定Table
随时准备转行
08-21 3338
手肝HTML+JS的表头/列固定Table组件
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
最新发布
徊忆羽菲
04-28 1498
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
HTML 表格滚动锁定表头，实现固定行列
热门推荐
qq_25775675的博客
04-01 1万+
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。 主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。
table固定表头
bluelotos893的博客
09-01 7463
设置table表头固定
冻结表格，表头固定，行头国定，列头固定
03-31
标题“冻结表格，表头固定，行头固定，列头固定”所涉及的知识点是关于如何在表格中保持表头、行头和列头在滚动时始终可见。以下是这些功能的详细说明： 1. **冻结表格**：冻结表格是一种功能，它允许用户在滚动...
固定表头（行头列头）脚本
07-04
在网页设计中，固定表头（行头列头）是一种常见的需求，特别是在处理大量数据时，用户需要在滚动页面时保持表头可见以便于参考。本文将深入探讨如何使用JavaScript和CSS来实现这一功能。 首先，我们需要理解CSS中的...
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
table head html5,HTML中的<table>标签及其子元素标签，JS中DOM对<table>的操作
weixin_31205797的博客
06-10 387
标签是HTML中最常用的标签之一了。无论网页中元素的定位，还是数据的格式化显示都少不了它。尽管不是定位标签，在CSS出现之前，在网页定位中起到非常重要的作用，CSS出现之后，仍然被大量用来进行网页布局。DOM对象对及其子元素的操作：Table对象集合：返回包含表格中所有单元格的一个数组。返回包含表格中所有行的一个数组。tBodies[]返回包含表格中所有 tbody 的一个数组。x.cells.l...
HTML5学习-表格标签
qq_43663493的博客
03-13 322
表格标签 1，表格的主要的作用 表格主要用于显示，展示数据，因为他可以让数据显得非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要一个清爽简约的表格就可以把繁杂的数据表现得很有条 2，表格的基本语法 <table> //用于定义表格的标签 ...
HTML表格实现固定表头 内容滚动
乐逍遥
05-25 891
分成两个表格 就可以了 比如 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> table { border-color: #e4e4e4; bor...
JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）
weixin_30819085的博客
09-30 1424
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-...
HTML table标签实现表头固定
大家好，我是 ed.
06-09 2085
HTML table标签实现表头固定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <table cellspacing="0" border="0" cellpadding="0"> <
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
Z_B_L的博客
10-12 1016
如何固定html表格头部，用css样式即可实现，操作简便、代码简单
table表身滑动，表头不动样式
qq_36939013的博客
09-27 924
.toolTipx{ display: flex; flex-direction: column; background: #fff; color: #6c6c6c; max-height: 300px; width: 300px; .head-box { width: 300px; padding-right: 5px; background: #dee0ee; } .toolTip-title { color: #32c5ff;
＜table＞表格标签属性
2202_75549187的博客
12-06 1460
表格标签属性
html 怎么置顶表格,html Table 表头固定的实现
weixin_34892992的博客
05-30 1561
本文介绍了html Table 表头固定的实现，分享给大家，具体如下：合同号签约客户发布客户合同状态选定条件的发布周期额度看看css*{padding:0;margin:0;}th{border:1px solid #e6e6e6;line-height: 5vh;color:#666666;font-size: 16px;}table {border-collapse: collapse;wid...
el-table固定表头和首行
06-02
要在 Element UI 的 el-table 组件中同时固定表头和首行，请使用以下代码： ``` <el-table :data="tableData" style="width: 100%" border> <el-table-column prop="name" label="姓名" fixed="left" width="100">...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值