资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css手写一个表头固定

css手写一个表头固定

SQC / 3113人阅读

摘要：等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。

Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定
主要遇到的个问题就是固定以后数据表格与表头的对齐问题，也看了很多我文章试下来都不怎么成功,只好自己一点点试
表头固定的一般思路是布两个table，一个放表头，一个放表格体，然后将表格体加上高度height以及overflow-y

</>复制代码 
  1.     
  2.     
  3.     
  4.             
  5.         
  6.             
  7.                 
  8.                 
  9.                 
  10.                 
  11.                 
  12.                 
  13.                 
  14.                 
  15.                 
  16.                 
  17.                 
  18.                 
  19.                 
  20.             
  21.             
  22.             
  23.             
  24.             
  25.             
  26.             
  27.             
  28.             
  29.             
  30.             
  31.             
  32.             
  33.         
  34.     
    35. 缩略图标题总价总销量周销量增幅商品评分分配开发SKU商品状态审核备注时间操作
  35.     
  36.     
  37.     
  38.             
  39.             
  40.             
  41.                 
  42.                 
  43.                 
  44.                 
  45.                 
  46.                 
  47.                 
  48.                 
  49.                 
  50.                 
  51.                 
  52.                 
  53.                 
  54.                 
  55.                     
  56.                     
  57.                     
  58.                     
  59.                     
  60.                     
  61.                     
  62.                     
  63.                     
  64.                     
  65.                     
  66.                     
  67.                     
  68.                 
  69.                 
  70.                         
  71.                         
  72.                         
  73.                         
  74.                         
  75.                         
  76.                         
  77.                         
  78.                         
  79.                         
  80.                         
  81.                         
  82.                         
  83.                 
  84.                 
  85.                         
  86.                         
  87.                         
  88.                         
  89.                         
  90.                         
  91.                         
  92.                         
  93.                         
  94.                         
  95.                         
  96.                         
  97.                         
  98.                 
  99.                 
  100.                         
  101.                         
  102.                         
  103.                         
  104.                         
  105.                         
  106.                         
  107.                         
  108.                         
  109.                         
  110.                         
  111.                         
  112.                         
  113.                 
  114.                 
  115.                         
  116.                         
  117.                         
  118.                         
  119.                         
  120.                         
  121.                         
  122.                         
  123.                         
  124.                         
  125.                         
  126.                         
  127.                         
  128.                 
  129.             
  130.     
    131. 此处应有图片Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上架:2016-07-02
  131.                         采集:2018-06-25
    		132. 增加
    此处应有图片Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上架:2016-07-02
  132.                             采集:2018-06-25
    		133. 增加
    此处应有图片Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上架:2016-07-02
  133.                             采集:2018-06-25
    		134. 增加
    此处应有图片Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上架:2016-07-02
  134.                             采集:2018-06-25
    		135. 增加
    此处应有图片Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor0.9913113107-21%5.0张乐abcadawdadawdawdadad开发成功备注上架:2016-07-02
  135.                             采集:2018-06-25
    		136. 增加
  136.

两个table定义的不一致也就导致了表头与表格的不对齐，这里需要使用将两个表格的列宽定义一致

</>复制代码 
  1.    
  2.       
  3.       
  4.       
  5.       
  6.       
  7.       
  8.       
  9.       
  10.       
  11.       
  12.       
  13.       
  14.       
  15.

在两个table标签下都定义一下相同的,注意列数与表格列数相同，最后一列可以不要定义固定的宽

可以看出来还是没有对齐，这里有两个问题，一是：表体加上滚动条后会占约17px的宽度，第二个是表格的列宽table-layout默认取值automatic是随单元格内容撑起来的，所以要对这两个做调整。我的方法是给表头加一个padding_right:17px;两个table都设定为table-layout：fixed
css代码

</>复制代码 
  1.         .content{
  2.             width: 80%;
  3.         }
  4.         table {
  5.             width: 100%;
  6.             border-collapse : collapse; 
  7.             border:1px solid #ccc;
  8.             color:#4c4c4c;
  9.         }
  10.         th,td{
  11.             padding:5px;
  12.         }
  13.         .table_body{
  14.             height:312px;
  15.             overflow-y: scroll;
  16.         }
  17.         .table_head{
  18.             padding-right: 17px;
  19.         }
  20.         .table_body table,.table_head table{
  21.             table-layout: fixed;
  22.         }

这样就完美对齐了，适合任意屏幕宽度

有几个需要注意的地方我的两个表格都使用div包裹起来，主要是由于表格display:table属性导致padding,overflow等属性很难设置上去，因此可以设置到外包裹的div上，毕竟table布局水真的深，一时还不敢碰

云服务器 GPU云服务器 固定表头 表格固定表头 固定表头html asp 表头 固定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114141.html

相关文章

  • css手写一个表头固定

    摘要：等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。 Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定 主要遇到的个问题就是固定以后数据表格与表头的对齐问题，也看了很多我...

    ygyooo 评论0 收藏0

  • bootstrap-table实现表头固定以及列固定

    摘要：之前使用写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一引入和引入 之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研...

    B0B0 评论0 收藏0

  • 移动端实现表头固定，tbody滚动，三种方法

    摘要：实现表头固定，垂直滚动准备工作获取页面可是区域高度屏幕旋转触发事件正常方向或者屏幕旋转竖屏屏幕顺时针旋转或者逆时针旋转横屏方法一两个思路第一个放表头，第二个方内容。 实现表头固定，tbody垂直滚动准备工作： 获取页面可是区域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    AlphaWallet 评论0 收藏0

  • 移动端实现表头固定，tbody滚动，三种方法

    摘要：实现表头固定，垂直滚动准备工作获取页面可是区域高度屏幕旋转触发事件正常方向或者屏幕旋转竖屏屏幕顺时针旋转或者逆时针旋转横屏方法一两个思路第一个放表头，第二个方内容。 实现表头固定，tbody垂直滚动准备工作： 获取页面可是区域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    bluesky 评论0 收藏0

  • 移动端实现表头固定，tbody滚动，三种方法

    摘要：实现表头固定，垂直滚动准备工作获取页面可是区域高度屏幕旋转触发事件正常方向或者屏幕旋转竖屏屏幕顺时针旋转或者逆时针旋转横屏方法一两个思路第一个放表头，第二个方内容。 实现表头固定，tbody垂直滚动准备工作： 获取页面可是区域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    twohappy 评论0 收藏0

发表评论

登陆后可评论

0条评论

SQC

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<