程序员经验分享-hwhale

许多列的数据表宽度溢出

2023-12-29

哇哦，我的 jquery 数据表插件有这个严重的问题。我有一个包含很多列（超过 35 列）的表，并且该表溢出了我的 div 内容。

我尝试了很多方法（包括解决堆栈溢出中相同问题的方法）但仍然无法解决这个问题。所以，我真的需要你的帮助。 :)

谢谢你 非常感谢

您可以在此处查看屏幕截图。

这是 JavaScript 代码

var list_table = $("#list_table").dataTable({
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true
        });

这是 html 表格

<table class="display" id="list_table">
<thead>
    <tr>
        <th rowspan="2">Account Code</th>             
        <th rowspan="2">Account Name</th>
        <th colspan="3">January</th><th colspan="3">February</th><th colspan="3">March</th><th colspan="3">April</th><th colspan="3">May</th><th colspan="3">June</th><th colspan="3">July</th><th colspan="3">August</th><th colspan="3">September</th><th colspan="3">October</th><th colspan="3">November</th><th colspan="3">December            
        </th><th colspan="3">January s/d December
            <!--            <th rowspan="2" class="link"></th>-->
        </th></tr>
    <tr>
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        
        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>        


        <th>Budget</th>
        <th>Actual</th>
        <th>Variance</th>   


    </tr>        
</thead>
<tbody>
    <tr>
        <td>5201010013</td>
        <td><span class="coa-text">INSENTIVE/SHIFT ALLOWANCE</span><br> <span style="background: #778A52" class="attr-text">Divisi Anggaran dan Pajak</span> <span class="loc-text">InChina</span> <span class="asset-text">FA-GENSET</span> <span class="tenant-text">PT. Angin Rupiah</span> </td>
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               
        <td class="align-right">2,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">2,500,000.00</td>                               

        <td class="align-right">30,000,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">30,000,000.00</td>    

    </tr> 
    <tr>
        <td>5203010001</td>
        <td><span class="coa-text">MAKAN BERSAMA TAMU DAN REKANAN</span><br> <span style="background: #778A52" class="attr-text">Divisi Anggaran dan Pajak</span> <span class="loc-text">Satu Dua</span> </td>
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">7,000,000.00</td>
        <td class="align-right">-5,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               
        <td class="align-right">1,500,000.00</td>
        <td class="align-right">0.00</td>
        <td class="align-right">1,500,000.00</td>                               

        <td class="align-right">18,000,000.00</td>
        <td class="align-right">7,000,000.00</td>
        <td class="align-right">11,000,000.00</td>    

    </tr> 
</tbody>

我建议首先删除 sScrollXInner （实际上并不需要它......:-)）。然后看看包装元素的宽度是多少。它最终应该看起来像这个例子：http://datatables.net/release-datatables/examples/basic_init/scroll_x.html http://datatables.net/release-datatables/examples/basic_init/scroll_x.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

width

DataTables

许多列的数据表宽度溢出 的相关文章

随机推荐

  • 使用 Pyinstaller 2.0 、PySide 1.1.2 Bindings 和 Qt 4.8 时如何在应用程序中包含图标

    what script looks like 工作应用程序应该是什么样子 在发布之前 我查看了以下问题并尝试将其用作使我的脚本正常工作的指南 但它的用处不大 PyInstaller 不会将 PyQt 的图像加载到 GUI https sta

  • 在 x 轴上绘制日期

    我正在尝试根据日期绘制信息 我有一个格式为 01 02 1991 的日期列表 我通过执行以下操作来转换它们 x parser parse date strftime Y m d 这使19910102 然后我尝试使用 num2date imp

  • 在 PowerShell 2.0 中加载 .NET 4.0 beta2 程序集

    我尝试从加载PresentationFramework dll NET http en wikipedia org wiki NET FrameworkPowerShell v2 0 中的 4 0 beta2 但它失败并出现以下错误 PS

  • 如何围绕对角线旋转 CALayer？

    我正在尝试实现一个翻转动画 用于像 iPhone 应用程序这样的棋盘游戏 动画应该看起来像一个旋转并改变其背面颜色的游戏片段 有点像黑白棋棋子 http en wikipedia org wiki Reversi 我已经成功创建了一个围绕其

  • 在ant中无条件执行任务？

    我正在尝试定义一个任务 该任务在目标完成执行时发出 使用回显 消息 无论该目标是否成功 具体来说 目标执行一个任务来运行一些单元测试 我想发出一条消息 指示结果在哪里可用

  • PushOr 修改 mongodb 子文档的类似操作符

    我想做的是 如果子文档存在 则更新它 否则 仅通过一种方法推送新的子文档 首先 找到 name SweetTown 进而 If Bob存在 我想将其声誉更改为30 Town collection name SweetTown residen

  • 在 Eclipse 下运行 JMH 基准测试

    我正在尝试在 Eclipse 下开始使用 JMH 我可以构建一个 jar 来从命令行执行 但也希望能够直接在 Eclipse 中运行它 以便于开发 目前我得到 java lang RuntimeException ERROR Unable

  • 意图附加未删除/替换

    我正在按按钮设置警报 警报是有意触发的 这个意图得到一个额外的 int 来传递给广播接收器 问题是意图的额外内容在第一个时设置一次 单击该按钮 并且在其他单击时不会发生变化 Intent intent new Intent A this B

  • 如何将字符串列表转换为int列表

    我在列表中有这个列表 a 1 2 3 4 1 2 3 4 1 2 3 4 但我需要它是整数 我不确定在哪里使用 int 将 str 更改为 int a 1 2 3 4 1 2 3 4 1 2 3 4 您可以使用嵌套列表理解 如下所示 a 1

  • 通过 Selenium 解码 facebook 上的类名

    我注意到 Facebook 有一些奇怪的类名 看起来是计算机生成的 我不知道这些类是否至少随着时间的推移保持不变 或者它们在某个时间间隔内发生变化 也许有这方面经验的人可以回答 我唯一能看到的是 当我退出 Chrome 并再次打开它时 它仍

  • 使用 DotNetOpenAuth 的两条腿 OAuth

    我已经阅读了两条腿的 OAuth 并了解其背后的原理 我的问题是特定于DotNetOpenAuth http dotnetopenauth net 8000 图书馆 是否有关于如何通过两条腿身份验证使用 DotNetOpenAuth 的示例

  • CORS - 它保护什么？

    I read https developer mozilla org en US docs Web HTTP Access control CORS https developer mozilla org en US docs Web HT

  • Drupal 6，视图 2：是否可以有一个仅适用于注册用户的过滤器？

    是否可以在 Drupal 6 视图中创建仅适用于注册用户的过滤器 对于我需要的一个过滤器 我使用用户投票 使用 Fivestar 和 VotingAPI 来了解他们的用户是否已经投票给该节点 并且当用户是匿名时 就像来自所有匿名用户的所有投

  • 我可以将 ARM 处理器配置为升序堆栈增长方向吗？

    这里有一个问题谈到堆栈增长方向 Michael Burr 回答说 在 ARM 处理器中 堆栈增长方向是可以配置的 即降序 正常行为 堆栈向内存中的零地址 较低地址 增长 或者升序 即堆栈向内存中的较高地址增长 大多数现代系统中堆栈增长的方向

  • Angular：根据服务方法调用设置路由

    我通过以下方式设置了路线配置 NgModule 我有一项服务 可以根据某些条件确定应向用户显示应用程序的哪些部分 我需要调用该服务并根据返回值设置路由 Problem 路由配置是在注释内设置的 我无法了解如何在此类设置中调用服务 更具体地说

  • 有没有办法防止 CALayer 阴影与相邻图层重叠？

    我有一个收藏CALayers 每个层都是同一父层的子层CALayer 并且每个都应用了阴影 这些层是动态定位的 而且层数很多 所以我无法提前预测它们将如何排列 如果这些层彼此相邻 足够近以至于它们几乎接触 则其中一层的阴影CALayers渲

  • SAPbobsCOM 类未注册

    我使用 asp net C 开发了一个 Web 应用程序来下在线订单 我的应用程序 在 SAP 服务器 Windows 2008 R2 上工作正常 但是当我将项目复制到本地计算机 运行 Windows 7 时 出现错误 看不到SAPbobs

  • 如何确定Python脚本运行的操作系统是否是类Unix操作系统？

    我正在尝试通过 Python 脚本确定操作系统是否基于 Unix 我可以想到两种方法来做到这一点 但它们都有缺点 检查是否platform system 在一个元组中 例如 Linux Darwin 问题是我不想提供每个制作的类 Unix

  • JBoss CLI 的特殊字符

    我使用 JBoss 6 4 8 版本处于域模式 我想通过 CLI 添加这 4 个系统属性 1 host myserver server config node system property javax net ssl keyStorePa

  • 许多列的数据表宽度溢出

    哇哦 我的 jquery 数据表插件有这个严重的问题 我有一个包含很多列 超过 35 列 的表 并且该表溢出了我的 div 内容 我尝试了很多方法 包括解决堆栈溢出中相同问题的方法 但仍然无法解决这个问题 所以 我真的需要你的帮助 谢谢你

热门标签