bootstrap-databale设置垂直滚动（吸顶）后头部错位问题处理

r囧r小猫 2022-05-15 12:13 287阅读 0赞

1.设置垂直滚动

<table class="s-table d-table"></table>

$(document).ready(function() {
        $('#example').DataTable( {
            "scrollY":        "500px"
        } );
    } );

2.头部错位处理

1）为table添加属性

<table class="s-table d-table" style="table-layout:fixed;"></table>

2)涉及到表格宽度变化的事件添加表格自适应方法

table.columns.adjust();

3.其他

datatable的垂直滚动实际上是生成两个table，分别放在class名为dataTables\_scrollHead和dataTables\_scrollBody的div中，前者中的table是没有tbody的，仅有一个thead作为固定头部使用，而后者的thead处于被遮挡状态，垂直滚动的时候前者中的thead固定不动，后者table中tbody进行滚动。

![70][]

参考：

[https://datatables.net/examples/basic\_init/scroll\_y.html][https_datatables.net_examples_basic_init_scroll_y.html]

[https://datatables.net/reference/api/columns.adjust()][https_datatables.net_reference_api_columns.adjust]

[70]: /images/20220515/b05c4219e2b24daea4b503ec8d4fc6e9.png
[https_datatables.net_examples_basic_init_scroll_y.html]: https://datatables.net/examples/basic_init/scroll_y.html
[https_datatables.net_reference_api_columns.adjust]: https://datatables.net/reference/api/columns.adjust%28%29

发表评论取消回复

表情：

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

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

相关阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 64 阅读

相关小程序标签滑动吸顶

1、HTML <view class="title { {isFixedTop?'title-fixed':''}}" id="navbar">

妖狐艹你老母/ 2022年11月14日 12:00/ 0 赞/ 246 阅读

相关元素滚动吸顶效果

position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 posit

曾经终败给现在/ 2022年11月03日 10:43/ 0 赞/ 291 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 291 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 433 阅读

相关 html设置吸顶效果

html设置吸顶效果方法一：js设置 window.onscroll = function () { // 滑动时搜索框吸顶

青旅半醒/ 2022年09月03日 05:17/ 0 赞/ 588 阅读

相关 bootstrap-databale设置垂直滚动（吸顶）后头部错位问题处理

1.设置垂直滚动 <table class="s-table d-table"></table> $(document).ready(function()

r囧r小猫/ 2022年05月15日 12:13/ 0 赞/ 288 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 01:29/ 0 赞/ 699 阅读

相关小程序制作吸顶菜单（监听滚动条）

1.使用onPageScroll()函数监听滚动条 onPageScroll(e){ //参数e会返回滚动条滚动的高度 console.lo

蔚落/ 2022年02月01日 14:47/ 0 赞/ 731 阅读

相关 js 吸顶 vue 吸顶

页面吸顶的效果，实现有两种，最快的一种是用position: sticky方法，不过该方法尚存在兼容性问题，使用的时候需加入兼容方法。使用方法跟position:

客官°小女子只卖身不卖艺/ 2022年01月23日 13:11/ 0 赞/ 411 阅读