java 表头固定_常用的固定表头的几种做法

本是古典何须时尚 2022-11-12 02:49 259阅读 0赞

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：

第一种感觉最简单的就是分放在两个

标签里，这样只控制不含有标题的那个，代码如下:

<table> 
 <tbody> 
  <tr> 
   <th><font>标题一</font></th> 
   <th><font>标题二</font></th> 
   <th><font>标题三</font></th> 
   <th><font>标题四</font></th> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
 </tbody> 
</table>

第二种不是很灵活，但是也比较简单，就是通过一个层来进行处理，将

放入层中，代码如下：Some Title

<table> 
 <tbody> 
  <tr> 
   <th><font>标题一</font></th> 
   <th><font>标题二</font></th> 
   <th><font>标题三</font></th> 
   <th><font>标题四</font></th> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
  <tr> 
   <td> 1</td> 
   <td> 2</td> 
   <td> 3</td> 
   <td> 4</td> 
  </tr> 
 </tbody> 
</table>

从以上代码可以看出，第二种不太方便的地方就是有一个id限制，给我的感觉就不是很舒服，但的确是非常的简单易用。

第三种也不是很麻烦，不使用id，但是这个代价却是通过增加一个层(

Some Title

DIV.tableContainer \{

OVERFLOW-X: auto; WIDTH: 100px

\}

DIV.bodyContainer \{

OVERFLOW-Y: auto; OVERFLOW-X: hidden; WIDTH: 300px; HEIGHT: 100px;

\}

<table> 
 <tbody> 
  <tr> 
   <td> 
    <table> 
     <tbody> 
      <tr> 
       <th><font>标题一</font></th> 
       <th><font>标题二</font></th> 
       <th><font>标题三</font></th> 
       <th><font>标题四</font></th> 
      </tr> 
     </tbody> 
    </table> 
    <div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
       <tr> 
        <td> 1</td> 
        <td> 2</td> 
        <td> 3</td> 
        <td> 4</td> 
       </tr> 
      </tbody> 
     </table> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

使用第三种方法时要特别注意：

最外边的层

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 155 阅读

相关 vue+element固定表头滚动条导致表头错误

解决方法 1. untl.js 封装一个公共的方法 // 重置表格 resetTableDom(table

你的名字/ 2023年06月17日 10:57/ 0 赞/ 33 阅读

相关 Table固定列和表头

一、实现思路：表格数据中存在合并单元格，网上找了好多列子都没有实现。最后是把一个table拆分为两个table实现的，第一个table（table1）中是需要固定的列及表头（表

灰太狼/ 2023年05月29日 09:28/ 0 赞/ 47 阅读

相关 java 表头固定_常用的固定表头的几种做法

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：第一种感觉最简单的就是分放在两个标签里，这样只控制不含有标题的那个，代码如下: <table>

本是古典何须时尚/ 2022年11月12日 02:49/ 0 赞/ 260 阅读

相关 html表头固定原理,表头固定(利用jquery实现原理介绍)

表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表

小灰灰/ 2022年10月05日 12:57/ 0 赞/ 272 阅读

相关 bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机网站，今天又拿出来弄一弄因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面但是由于数据的列比较多，所以

骑猪看日落/ 2022年08月13日 14:47/ 0 赞/ 234 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

た入场券/ 2022年07月12日 06:25/ 0 赞/ 222 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

- 日理万妓/ 2022年07月12日 06:25/ 0 赞/ 227 阅读

相关实现一个 AngularJS 的固定表头指令

1 前言在前端业务开发中经常需要在页面上创建一个内容超级多的 Table，用户操作时如果将页面滚动到页中就会导致不知道当前列的列头名称或者无法横向滚动到想找的列。针

你的名字/ 2022年05月31日 08:59/ 0 赞/ 236 阅读

相关 easyui datagrid表头 toolbar 固定

当用到EasyUI中的 datagrid 时，设置 fit:true, 就会使表头跟toolbar固定，但是这个容器要设置固定的宽和高。 ![format_png][] !

雨点打透心脏的1/2处/ 2021年08月26日 14:02/ 0 赞/ 682 阅读