程序员经验分享-hwhale

固定列标题宽度与正文列宽度不匹配

2024-02-03

标题与列宽不对齐。JsFiddle http://jsfiddle.net/DyMSb/1/.

截屏 http://s17.postimg.org/dybznay9b/screen.png

我在用着：

  • ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css
  • ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css
  • datatables.net/release-datatables/media/js/jquery.js
  • datatables.net/release-datatables/media/js/jquery.dataTables.js
  • datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js

这是我正在使用的代码：

JS:

$(document).ready(function() {   
    var aoColumns = [null,null,null,null,null,null,null,null,null,null,null];

    var oTable = $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "150%",
        "bPaginate": false,
        "bAutoWidth": false,
        "aoColumns": aoColumns       
    } );

    var oFC = new FixedColumns( oTable, {
        "iLeftColumns": 4
    } );

    oTable.fnAdjustColumnSizing();
});

HTML:

<body>
   <div class="container">
      <table width="100%" cellpadding="0" cellspacing="0" border="1" id="example">
         <thead>
            <tr>
               <th rowspan="2">Branch</th>
               <th rowspan="2">Object</th>
               <th rowspan="2">Address</th>
               <th rowspan="2">Count</th>
               <th colspan="7">Availability</th>
            </tr>
            <tr>
               <th>15</th>
               <th>16</th>
               <th>17</th>
               <th>18</th>
               <th>19</th>
               <th>20</th>
               <th>21</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>United States of America, Washington</td>
               <td>ABC-123</td>
               <td>1514 Amber Pond Highway, Nohead Bottom, Washington, 99205-8224, US, (425) 023-9448</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
            <tr>
               <td>United States of America, South Dakota</td>
               <td>DEF-456</td>
               <td>7827 Stony Pointe, Sunsweet, South Dakota, 57006-2156, US, (605) 621-7800</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
            <tr>
               <td>United States of America, Newfoundland</td>
               <td>XYZ-549</td>
               <td>2379 Dewy Pioneer Highlands, Humbug, Newfoundland, A7O-6P5, CA, (709) 217-5115</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
            <tr>
               <td>United States of America, Washington</td>
               <td>GHI-789</td>
               <td>5842 Easy Bay, Kravaksarak, Washington, 98428-9376, US, (425) 998-1922</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
         </tbody>
      </table>
   </div>
</body>

当数据表包含水平填充时，数据表会错误计算宽度。

我通过从 th 中删除填充，在其中添加一个跨度，然后将填充添加到该跨度来解决这个问题。

ie.

<style>
th {padding: 0}
th > span {padding: 0 10px}
<style>

像这样更改标记：

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

jQuery

css

jQueryUI

jqueryplugins

DataTables

固定列标题宽度与正文列宽度不匹配 的相关文章

  • 如何更改 ModelForm 中所有 Django 日期字段的默认小部件？

    给定一组典型模型 Application A from django db import models class TypicalModelA models Model the date models DateField Applicati

  • 从前端更改记录顺序

    我在编写下一个功能时遇到问题 我希望用户能够重新排列记录并更改 display order 值 我使用 Jquery UI 的可拖放功能来促进这一点 我可以看到如何简单地交换 display order 值 但我想为一条记录设置一个显示顺序

  • 如何在 leaflet.js 中设置 layer.control 的样式？

    我正在尝试更改图层控件中的默认下拉菜单图标 我希望图标旁边有文字 有什么办法可以做到这一点吗 也许使用 JQuery 和 CSS 我正在开发一个基于此示例的传单项目 http leafletjs com examples layers co

  • 滑块下的 jQuery UI 滑块标签

    我仅限于使用 jQuery 1 4 2 和 jQuery ui 1 8 5 这不是我的选择 请不要要求我升级到最新版本 我创建了一个滑块 显示滑动条上方的当前值 但我现在需要的是一种在滑动条下方填充图例的方法 其距离与滑块相同 即 如果滑块

  • 用于动态字符计数的 Jasmine 单元测试用例

    任何人都可以给我编写测试用例的例子来检查是否 jquery 和 jasmine 中调用 keyup 事件中的函数 我对 jquery 和 jasmine 相当陌生 所以对这些错误感到抱歉 当用户在输入字段中输入字符时 该程序显示剩余的字符数

  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top

  • CSS 中的 * 有什么作用？

    明星是做什么的 这叫什么 对我来说 这是某种通配符 它叫什么名字 以便我可以阅读它 div zoom 1 this zoom 1 display inline display inline and this whats the differ

  • 如何根据按钮单击折叠和展开 Kendo UI 树视图中的所有树节点？

    这是行不通的 您可以使用此代码 1 崩溃 折叠kendoTree查看文档 http docs kendoui com api web treeview methods collapse treeview kendoTreeView var

  • 在 TCPDF 中设置背景颜色

    我已经手动设置了第一页的背景颜色 如下所示 pdf gt AddPage pdf gt SetFillColor 52 21 0 76 pdf gt Rect 0 0 pdf gt getPageWidth pdf gt getPageHe

  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq

  • 如何用按钮打开所有infoWIndows

    现在我想添加打开所有引脚弹出窗口的按钮 infoWindows 所以我添加功能openAllInfoWindows并添加infoWindows i open 命令 但是不起作用 HTML 代码 a href Close a a href O

  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon

  • 简单的 jQuery 帖子无法在 Internet Explorer 9 上运行（访问被拒绝）

    我使用 JQuery 和 PHP 编写了一个验证器 该验证器适用于除 Internet Explorer 9 之外的所有浏览器 我收到错误消息 SCRIPT5 访问被拒绝 jQuery 代码 contact send click funct

  • 在 HTML 中移动选取框/下移文本

    我正在尝试向下移动或移动 HTML 中的文本 但我似乎无法将其移动到任何地方 我添加了一个颜色命令来更改文本的颜色 但似乎只是移动了 它一直到顶部

  • 使用 Javascript / Jquery 的本地存储（不使用 HTML5）

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事

  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达

  • 点击问题：动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li

  • 如何在 angularjs 中修剪（）字符串？

    有角度特定的方法吗 如果没有 我应该使用内置的jquery 来做到这一点吗 如果我应该使用内置的jquery 如何在不使用 的情况下访问trim 函数 或者这是必要的 编辑 是的 我知道 str trim 对不起 我需要这个才能在 IE 8

  • 使用文本遮盖视频

    是否可以使用 HTML CSS 文本来屏蔽视频 我已经找到并设置了这种工作方式 但没有一种允许文本后面有透明背景 例如 这支笔要求您进行某种填充 它并不是真正掩盖实际视频 而是创造幻觉 https codepen io dudleystor

  • FullCalendar 检查选择日是否有活动？

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c

随机推荐

  • 将警告转换为错误

    在 Windows 中 VC 有一个不错的选择 We http msdn microsoft com en us library thxezb7y aspx将特定警告转换为错误 此外 VC 发出的每个警告都有一个警告编号 例如 warnin

  • 如何将 Reader monad 添加到 Scotty 的 monad 中？

    我正在尝试使用 Scotty 构建一个非常简单的 API 我想扩展 Scotty monad 以便我的路由处理程序操作能够访问不变的环境 我相信做到这一点的方法是添加一个Readermonad 到堆栈 现在我只想传递一些Text周围的数据

  • 如何在 php 中添加形状文件 (.shp) 并在 php 文件中使用该形状文件数据？

    我必须在 php 中开发一个项目 并且必须包含形状文件 并且该形状文件需要转换为 kml 文件 我知道如何将形状文件转换为 kml 文件 但我不知道如何将形状文件导入 导入到 php 项目中 我还有包含更多信息的形状文件的支持文件 其中一些

  • 使用python访问google

    我怎样才能访问谷歌 我试过那个代码 urllib urlopen http www google com 但它显示消息prove you are human或者有些人的想法是这样的 有人说尝试用户代理 我不知道 您应该使用谷歌应用程序编程接

  • 在本地计算机上编译 Azure Functions（.csx 文件）

    我正在使用 AzureQueue 触发器模板 最好在本地计算机中编写函数 编译并执行它 然后部署 而不是在 azure 门户中编写它 有什么办法可以做到吗 Thanks Krishh 答案是肯定的 但目前体验并不好 随着我们增强服务 本地开

  • Alamofire HTTPS 10.3 中的更改

    我目前正在一个项目中使用 Alamofire 并且看到了有关具有不同功能的 10 3 beta 的问题 我有一个在 iOS 10 2 模拟器中运行良好的相同项目 我使用自签名证书向 HTTPS url 发出 get 请求 当我在安装了相同证

  • 如何打印 groupby 对象

    我想打印与 Pandas 分组的结果 我有一个数据框 import pandas as pd df pd DataFrame A one one two three three one B range 6 print df A B 0 on

  • CUDA 不支持边界检查

    我尝试使用 Numba 并访问 GPU 以加速代码 但出现以下错误 in jit raise NotImplementedError bounds checking is not supported for CUDA NotImplemen

  • 测试抛出 IntegrityError 的 SQLAlchemy 代码的正确方法是什么？

    我读过了this https stackoverflow com questions 129507 how do you test that a python function throws an exception问答 并且已经尝试捕获我

  • 在 tfs 中看不到上线选项

    我在离线模式下打开了一个解决方案 但现在我尝试上网并连接到 tfs 但我似乎看不到 文件 gt 源代码管理 下的 上网 按钮 我使用 团队 gt 连接到 Team Foundation Server 选项连接到 TFS 但在 文件 gt 源

  • 将字节数组转换为不使用画布的图像数据

    是否可以在不使用画布的情况下将字节数组转换为图像数据 我目前使用类似的东西 但是我认为可以在没有画布的情况下完成 还是我错了 var canvas document getElementsByTagName canvas 0 var ctx

  • jQuery/Javascript - 淡入 div onclick 淡出另一个不起作用

    我想在点击 div 时弹出一个菜单 我在这个 Fiddle 中一切正常 http jsfiddle net EhtrR 825 http jsfiddle net EhtrR 825 但我无法让它在我的代码上工作 HTML div clas

  • 如何创建一个可以点击其他应用程序的自动点击器应用程序？

    我见过很多提供自动点击功能的应用程序 但他们不提供一些特定的定制 所以我决定创建一个 我看过很多提供自动点击的教程 但它们应该在同一个应用程序中使用 但我想创建一个自动点击应用程序 可以单击其他应用程序的视图 我是一名中级java开发人员

  • Delphi 应用程序如何检测 Windows PC 的网络代理设置？

    我有一个 Delphi 应用程序 它使用以下命令与 Internet 上的 Web 服务器进行通信印地组件 http www indyproject org 该应用程序的大多数用户都具有直接的 Internet 连接 但有些用户位于本地网络

  • Lua 作为嵌入式语言的替代品？

    我正在开发一个在 DSP 上运行 Linux 的嵌入式系统 现在我们想让它的某些部分可以编写脚本 并且我们正在寻找一种很好的嵌入式脚本语言 这些脚本应该与我们现有的 C 代码库很好地集成 并且小而快 我知道 Lua 是解决此类问题的行业选择

  • 将 GCController 与 tvOS 模拟器结合使用

    我没有新的 Apple TV 但正在使用模拟器为其制作游戏原型 不幸的是 我似乎无法让 GCController 将 Siri 遥控器列为可用控制器 正如 tvOS 文档所示 我的控制器列表始终是 0 个元素长 即使我调用startWire

  • OS X 的 Boot2Docker 无法启动

    我是 docker 新手 我正在尝试在我的工作计算机上运行 boot2docker 我使用从办公室网络挂载主目录的用户帐户登录到运行 OS X 版本 10 10 1 Yosemite 的计算机 我安装了 Docker v1 4 1https

  • 禁用内联CSS样式[重复]

    这个问题在这里已经有答案了 当我使用 IE Developer 工具检查 html 时 我发现按钮有一种内联样式 我什么都不想要width此输入元素的属性 如何禁用或用空覆盖它width 如果您想覆盖内联样式 那么您需要在样式表中添加样式

  • Elasticsearch 的 406（不可接受）错误代码是什么意思？

    我正在尝试使用qwest http dreamysource io project qwest将一些数据发送到 Elasticsearch qwest post http elk example com 9200 incidents thi

  • 固定列标题宽度与正文列宽度不匹配

    标题与列宽不对齐 JsFiddle http jsfiddle net DyMSb 1 截屏 http s17 postimg org dybznay9b screen png 我在用着 ajax aspnetcdn com ajax jq

热门标签