固定table的表头同时固定列

table表格是我们最常使用的数据显示一种形式，但有时候数据比较多的时候就需要我们去固定表头，固定列。我这里用简单的css样式配合两句js脚本来实现，希望能够去帮到你。

<div class="tableContainer">
        <div class="sideTable">
          <span>产品小类</span>
          <div  id="sideTable">
            <table>
              <tr><td>奥瑞奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
              <tr><td>奥瑞</td></tr>
            </table>
          </div>

        </div>
        <div class="tableContent">
          <div id="kk">
            <div id="fixedHeader">
              <table>
                <tr>
                  <td>上海</td>
                  <td>温州</td>
                  <td>杭州</td>
                  <td>南京</td>
                  <td>上海</td>
                  <td>温州</td>
                  <td>杭州</td>
                  <td>南京</td>
                  <td>上海</td>
                  <td>温州</td>
                  <td>杭州</td>
                  <td>南京</td>
                  <td>上海</td>
                  <td>温州</td>
                  <td>杭州</td>
                </tr>
              </table>
            </div>
          </div>

          <div  id="tableContentTwo" @scroll="fixedData">
            <table>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
              <tr>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
                <td>南京</td>
                <td>上海</td>
                <td>温州</td>
                <td>杭州</td>
              </tr>
            </table>
          </div>

 1 .tableContainer{
 2     margin-top: .05rem;
 3     overflow: hidden;
 4     background-color: #fff;
 5     .boxSizing;
 6     padding: .2rem;
 7     table{
 8       table-layout:fixed;
 9       border:1px solid #e0e0e0;
10       tr{
11         border:1px solid #e0e0e0;
12         td{
13           border-right: 1px solid #e0e0e0;
14           .boxSizing;
15           text-align: center;
16           .fontSize(14);
17           .lineHeight(38);
18         }
19       }
20     }
21     .sideTable{
22       float: left;
23       .width(160);
24       span{
25         display: block;
26         .fontSize(14);
27         .lineHeight(38);
28         border:1px solid #e0e0e0;
29         background-color: #eee;
30         .boxSizing;
31         .width(160);
32         padding-left: .5em;
33       }
34       #sideTable{
35         max-height: 2rem;
36         overflow: hidden;
37         border-bottom: 1px solid #e0e0e0;
38         table{
39           border-top:none;
40           tr{
41             border-right: none;
42             &:nth-of-type(1){
43               border-top:none;
44             }
45           }
46           td{
47             .width(160);
48             text-align: left;
49             .boxSizing;
50             padding-left: 0.5em;
51             border-right: none;
52           }
53         }
54       }
55     }
56     .tableContent{
57       float: left;
58       .width(1440);
59       #kk{
60         width: 100%;
61         overflow: hidden;
62         border-right: 1px solid #e0e0e0;
63         #fixedHeader{
64           width: 100%;
65           table{
66             width:10rem;
67             tr{
68               border-top:1px solid #e0e0e0;
69               td{
70                 background-color: #eee;
71                 .width(160);
72               }
73             }
74           }
75         }
76       }
77
78       #tableContentTwo{
79        .width(1458);
80         max-height: 2.19rem;
81         overflow-y: auto;
82         overflow-x: auto;
83       }
84       table{
85         width: 10rem;
86         border-top: none;
87         border-left: none;
88         tr{
89           &:nth-of-type(1){
90             border-top: none;
91           }
92           td{
93             .width(160);
94           }
95         }
96       }
97     }
98   }

时间： 2024-10-05 20:44:28

固定table的表头同时固定列的相关文章

Saiku如何固定查询结果table的表头和首列

在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件使用后效果都不理想,所以决定自己动手,丰衣足食. 我的思路来自:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 使用四个table,其中一个为saiku原有的,再增加3个,思路效果图: js代码实现: 1.找到SaikuTab

bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面可是因为数据的列比較多.所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性. 刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的.那么问题来了若是滑动到

JavaScript：固定table的表头

当表格数据很多,以致于容器块元素出现滚动条.而在滚动滚动条的时候,数据行会被块元素遮挡.若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置.下面的jsp代码可以实现表头固定,经过测试可以直接使用.在IE浏览器下,拉动滚动条时表头会抖动,在谷歌下确实很流程,估计是浏览器的兼容性问题. <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head

固定table的表头CSS&JQuery

対応ブラウザのバージョン Internet Explorer 9 / 10 / 11 Firefox 29 Google Chrome 34 Safari 5 Opera 12 表头固定的方法 <table class="table-design tablelock1"> <thead> <tr> <th>TableHeader1</th><th>TableHeader2</th> <th>

asp.net table表格表头及列固定实现

固定table表头

项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏览器没有做太多测试,但是在ie9.火狐.360浏览器中已测试通过. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

使用css固定table第一列

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;} .fixedTable tr{line-height: 30px;border:1px solid #fff;} .fixedTable tr:first-child{height

如何让table中td宽度固定

table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td .table td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 如何让table中td宽度固定

js表头标题固定

1. //表头跟踪固定(按钮与表头) var trObj = $("#zdy_id").find("tr:eq(3)");//自定义zdy_id,处于第3行 var trObjChild = $(trObj).children(); var topValue = 0; var trObj_hj = $("#zdy_id").find("tr:eq(4)"); var trObjChild_hj = $(trObj_hj).ch