css+jquery完美实现table表头固定显示(浮动)资源-CSDN下载

共4个文件

js：2个

css：1个

html：1个

表头固定

thead固定

css表头滚动

html表头浮动

5星 · 超过95%的资源需积分: 46 175 浏览量 2014-11-18 17:04:37 上传评论 5 收藏 27KB RAR 举报

在网页设计中，数据展示经常使用到表格（table），尤其是数据量大时，滚动查看成为必然。然而，当表格内容过多导致需要滚动时，表头（thead）的可见性会受到影响，用户可能难以对应列标题理解数据。为了解决这个问题，我们可以采用CSS和jQuery来实现表头的固定显示，即使在内容滚动时，表头依然可见，提高用户体验。我们需要了解CSS中的定位技术。在CSS中，可以使用`position`属性来改变元素的定位方式。当设置`position: fixed`时，元素将相对于浏览器窗口进行定位，即使在页面滚动时，它也会保持在屏幕的特定位置。这就是实现表头固定的基础。接着，我们来看看如何用jQuery来动态调整表头的样式。jQuery是一个强大的JavaScript库，可以简化DOM操作和事件处理。在表格滚动时，我们需要监听滚动事件（`scroll`），然后根据滚动条的位置调整表头的位置。例如，可以写一个函数，在滚动事件触发时，计算出表头应有的top值，然后使用`css()`方法设置样式。 HTML部分，我们需要有一个包含`thead`和`tbody`的`table`元素。`thead`用于存放表头，`tbody`用于存放数据行。为了实现更好的效果，可以将`thead`和`tbody`分别封装在两个独立的`div`中，分别设置它们的`position`为`relative`和`absolute`，这样在滚动时，`tbody`会覆盖在`thead`上方，而不会影响到表头的定位。 CSS部分，初始状态下，表头`thead`的`position`设为`fixed`，`z-index`设高一些，确保在`tbody`之上。同时，需要设置适当的`width`和`top`值，以确保表头始终在顶部。`tbody`的`height`应设置为可视区域高度减去表头高度，以便内容可以滚动。 jQuery部分，可以使用以下代码监听滚动事件： ```javascript $(window).on('scroll', function() { var scrollTop = $(this).scrollTop(); // 获取当前滚动条的垂直位置 $('#theadDiv').css('top', scrollTop); // #theadDiv是包裹表头的div，设置其top值 }); ``` 这只是一个基础的实现，实际应用中可能还需要考虑更多细节，比如响应式布局、不同浏览器的兼容性问题等。在实际项目中，可以进一步优化这个功能，例如添加平滑滚动效果，或者当表头超出视口时取消固定等。结合CSS的`position: fixed`和jQuery的事件监听及样式调整，我们可以轻松实现table表头的固定显示，使用户在滚动查看大量数据时仍能清晰地看到列标题，提升交互体验。在实际开发中，这种技术广泛应用于数据密集型的网页，如报表、统计分析页面等。

资源推荐

资源详情

资源评论

收起资源包目录

example.rar （4个子文件）

example

man_sta_day.js 2KB

example.html 20KB

jquery-1.4.2.min.js 70KB

manage_form_master.css 6KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link type="text/css" rel="Stylesheet" href="manage_form_master.css" /> </head> <body> <form method="post" id="form1"> <div class='yemei_top print' style='width:99%;'> 2014年11月份每日收入统计 </div> <div class="js_tit"> <strong class="js_t01"> 月份： <input name="txt_time" type="text" value="2014年11月" id="txt_time" style="width:100px;" /> </strong> <strong class="js_t01"> <a id="LinkButton1" class="btnItem" href="javascript:void(0);">快速搜索</a> </strong> </div> <p class="p_space"></p> <div class="m_head"> <table class="table_main" border="0" cellpadding="0" cellspacing="0" id="tab_head"> <thead> <tr> <th rowspan="2" width='13%'>日期</th> <th colspan="6">销售</th> <th colspan="5">回款</th> <th rowspan="2" width="10%">合计</th> </tr> <tr> <th width="7%">签单</th> <th width="7%">现金</th> <th width="7%">刷卡</th> <th width="7%">转账</th> <th width="7%">支付宝</th> <th width="7%">小计</th> <th width="7%">现金</th> <th width="7%">刷卡</th> <th width="7%">转账</th> <th width="7%">支付宝</th> <th width="7%">小计</th> </tr> </thead> </table> </div> <table class="table_main" border="0" cellpadding="0" cellspacing="0" id="tab_main"> <tbody> <tr><td align='center'>2014-11-01</td><td class='gray' align='center'>0</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥13450</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥13450</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥13450</i></td></tr><tr><td align='center'>2014-11-02</td><td class='gray' align='center'>0</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥3184</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1000</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥4184</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥4184</i></td></tr><tr><td align='center'>2014-11-03</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥18847</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥2034</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥20881</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥20881</i></td></tr><tr><td align='center'>2014-11-04</td><td class='gray' align='center'>0</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥773</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥773</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥773</i></td></tr><tr><td align='center'>2014-11-05</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥3120</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1763</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1800</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥6683</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥6683</i></td></tr><tr><td align='center'>2014-11-06</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥75</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥7773</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥188</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥8036</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥8036</i></td></tr><tr><td align='center'>2014-11-07</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1370</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥2971</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥360</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥4701</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥4701</i></td></tr><tr><td align='center'>2014-11-08</td><td class='gray' align='center'>0</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥634</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥634</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥634</i></td></tr><tr><td align='center'>2014-11-09</td><td class='gray' align='center'>0</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1360</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥1360</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'>¥1360</i></td></tr><tr><td align='center'>2014-11-10</td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥2640</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1128</a></td><td align='center'><a href='javascript:void(0);' class='o_q_det'>¥1575</a></td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>¥5343</a></i><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td class='gray' align='center'>0</td><td align='center'><i class='orange'>0</i></td><td align='center'><i class='red'

评论收藏

内容反馈