table表头固定

最新推荐文章于 2023-12-15 15:24:46 发布
最新推荐文章于 2023-12-15 15:24:46 发布
阅读量172 收藏
点赞数
分类专栏： html 文章标签： css html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table tbody {
            display: block;
            height: 200px;
            overflow-y: scroll;
        }
 
        table thead,
        table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            text-align: center;
        }
 
        thead th,
        tbody td {
            width: 50px;
        }
 
        table thead {
            width: calc( 100% - 1em);
        }
    </style>
</head>
 
<body>
    <div style="width: 800px;">
        <div class="table-head">
            <table align="center">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>内容</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>我只是用来测试的</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
 
</html>

简单实现Table固定表头
github_35143739的博客
12-18 9670
下面是本人写的很简单的固定TABLE头部的插件，他使用动画来帮你固定表头，从而在保持表头格式的同时，不会损耗太多性能
jquery-clone-tableheader table 头部固定
12-24
jquery-clone-tableheader table 头部抬头固定 用于 多数据出现滚动条，看不到标题
table 头部固定
weixin_30363509的博客
06-27 136
.table { height: 310px; } table tbody { display: block; max-height: 270px; overflow-y: auto; } table thead, tbody tr { ...
table固定表头
bluelotos893的博客
09-01 7945
设置table表头固定
el-table 表头固定
柑橘乌云_
04-28 6891
el-table、 如果你想高度自适应并且表头固定，那么可以通过css来实现，就可以避免高度定死的情况。给出的属性是height ，表头就可以固定，但是带来的问题就是，表格高度就定死了。
html Table 表头固定的实现
09-22
首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景颜色，确保它在视觉上与表格主体（.table-body）有所区分。重要的是，给这个表头添加一个合适的padding-right样式。这个...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery的库文件、Bootstrap的样式文件以及bootstrap-table自身的样式和脚本文件。如果需要实现列固定，还需要...
table固定表头、固定列
RRRRRDong的博客
07-17 8585
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
jquery插件table表格头部和左侧固定
09-29
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，所以能够很好的支持各种浏览器上的报表展示！
table固定表头和列头
12-15
固定表头和列头
table表头固定，内容滚动
qq_44869043的博客
06-16 4267
最近接到一个需求，要thead表头固定，tbody内容实现滚动。 简单，给tbody加高度就行了。 什么？！竟然不行失败了！！ 既然无法限制tbody本身的高度，那就给它套一个div，限制div的高度，让tbody在div里面滚就好了。 但是！！table里面，不能在tbody外面套div！浏览器无法解析！会变成这样： 哎呀，这也不行那也不行，到底要怎么搞？ 找了别人的代码，好家伙！可以用两个table来实现这个功能。 第一个table管理thead，第二个table管理tbody，再用div去包裹第二
table表头固定方法
weixin_44891920的博客
11-28 488
思路监听滚动然后利用css3的translateY属性位移表头即可 <div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;"> <table> <thead> <tr align="center" style="background: #dcdcdc;">
css实现table表头和列固定功能
sumimg的博客
12-15 1435
项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。高度要自适应（table默认支持）
Table 固定表头的几种方法
weixin_30666401的博客
12-14 298
<style type="text/css"> /*所有内容都在这个DIV内*/ div.all { border: 3px solid #FF00FF; width: 80%; /*这个宽度可根据实际需要改变*/ clear: right; } ...
uniapp 上下滚动头部固定，左右滚动左侧边栏固定布局
fly_666的博客
06-22 1327
uniapp 上下滚动头部固定，左右滑动左侧固定
uniapp 上下滚动，头部固定，左右滚动，左侧边栏固定布局
qq_41646185的博客
04-02 6625
情景：上下滚动，头部固定，左右滚动，左侧固定，表格单元格宽度固定，单元格高度根据内容自动换行，同一行高度一致 参考：上下滚动，头部固定，左右滚动，左侧边栏固定布局 - 一个大柚子~ - 博客园 ...
table 表头固定
最新发布
05-25
### 实现表格表头固定功能的方法 在前端开发中，实现表格表头固定通常可以通过多种方式达成。以下是几种常见的方法及其具体实现： #### 方法一：使用 `position: sticky` 属性 通过 CSS 中的 `position: sticky` 属性可以轻松实现粘性定位的效果。这种方法适用于简单的场景，无需额外依赖第三方库。 ```css .table-container { max-height: 300px; overflow-y: auto; } table thead th { position: -webkit-sticky; /* 兼容 Safari */ position: sticky; top: 0; /* 距离视口顶部的距离 */ background-color: white; /* 防止滚动时背景透明 */ z-index: 1; /* 确保表头不会被其他内容遮挡 */ } ``` 此方法简单易用，适合大多数现代浏览器环境[^3]。 --- #### 方法二：基于 Vue.js 和 Element UI 的解决方案 如果项目中已经集成了 Vue.js 和 Element UI，则可以直接利用其内置的功能或扩展来实现表头固定。 ##### 使用 `el-table` 的高度属性 Element UI 提供了一个便捷的方式来设置表格的高度并使表头保持可见。只需为 `<el-table>` 设置一个固定高度即可自动启用该特性。 ```html <template> <div class="table-wrap"> <el-table :data="tableData" height="300"> <!-- 列定义 --> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2023-10-01', name: '张三' }, { date: '2023-10-02', name: '李四' } ] }; } }; </script> <style scoped> .table-wrap { max-height: 300px; overflow-y: auto; } </style> ``` 需要注意的是，这种方式要求提前设定好表格的高度，可能不够灵活[^2]。 --- #### 方法三：自定义 Sticky Header 插件 对于更复杂的需求或者需要跨项目的重用，可以选择封装一个通用的混入 (mixin) 或者独立组件来处理表头固定逻辑。 以下是一个基于 Vue.js 的简易实现示例： ```javascript // StickyHeaderMixin.js export const StickyHeaderMixin = { methods: { handleScroll(event) { const target = event.target; if (!target.querySelector('thead')) return; Array.from(target.querySelectorAll('th')).forEach((cell, index) => { cell.style.position = 'sticky'; cell.style.top = `${index * 45}px`; // 动态调整偏移量 }); } }, mounted() { this.$nextTick(() => { this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll); }); }, beforeDestroy() { this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll); } }; // TableComponent.vue <template> <div ref="scrollContainer" class="scrollable-area"> <table> <thead> <tr><th>列名1</th><th>列名2</th></tr> </thead> <tbody> <tr v-for="(row, idx) in rows" :key="idx"><td>{{ row.col1 }}</td><td>{{ row.col2 }}</td></tr> </tbody> </table> </div> </template> <script> import { StickyHeaderMixin } from './StickyHeaderMixin'; export default { mixins: [StickyHeaderMixin], data() { return { rows: [...Array(10).keys()].map(i => ({ col1: i, col2: `数据${i}` })) }; } }; </script> <style scoped> .scrollable-area { max-height: 200px; overflow-y: scroll; } </style> ``` 这种方法虽然稍显繁琐，但提供了更高的灵活性和可维护性[^2]。 --- #### 方法四：引入成熟的开源项目 当需求较为复杂时，考虑直接采用现有的成熟方案可能是最高效的选择之一。例如，“sticky-headers-table” 是一个专注于解决此类问题的开源工具[^1]。 安装命令如下： ```bash npm install @gitcode/sticky-headers-table --save ``` 随后按照官方文档集成到自己的应用中即可快速获得所需功能。 --- ### 总结 以上介绍了四种不同的技术路径用于实现表格表头固定的交互体验。每种方法都有各自的优缺点，在实际选型过程中应综合考量团队技术水平、现有框架生态以及性能开销等因素做出最佳决策。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值