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

本是古典何须时尚 2022-11-12 02:49 219阅读 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 条评论，219人围观）

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

相关阅读

相关 html table 固定表头和列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

分手后的思念是犯贱/ 2024年04月17日 05:34/ 0 赞/ 40 阅读

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

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

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

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

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

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

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

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

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

相关 bootstrap中固定table的表头

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

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

相关 html固定表头

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

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

相关 html固定表头

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

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

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

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

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

相关 jquery 表格表头固定，表格滚动 ------gxy

实现了表头固定，表身滚动： -------------------- <div id="scroll_table" class="col-md-12 bottom_

约定不等于承诺〃/ 2022年05月28日 00:21/ 0 赞/ 353 阅读

相关 easyui datagrid表头 toolbar 固定

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

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