1

我正在使用带有 jquery ui 主题的数据表,对于可排序的列,一些 TH 包装了用于对该列进行排序的小箭头图标。

我有大约 7 列正在显示。对于具有少量文本(不比实际 TH 文本宽)的 TD,箭头图标会在 TH 上换行。关于如何制作它的任何想法,以便所有 TH 标签都不会包装文本?我尝试将“sClass:nowrap”添加到每一列,然后创建一个使用 white-space:nowrap 的 css nowrap 类,但这仅适用于 TD 而不是 TH。

基本上需要一种方法来确保每列的最小宽度与 TH 内容一样宽(包括箭头)

4

5 回答 5

2

将此 CSS 添加到您的页面

<style type="text/css">
table.display thead th span.css_right {
  float: right;
}
</style>
于 2012-02-27T20:47:47.717 回答
1

确保头巾的侧面没有填充物。为我解决了问题!

于 2012-04-24T02:56:06.523 回答
1

我也是,有这个问题。深入研究代码后,基本原因是当 dataTables 使用 jQuery UI 重新计算/重新填充 theads 时,它会在 div 中插入一个浮动跨度,但也不会用浮动跨度包装原始文本。所以代码看起来像这样:

<th class="ui-state-default" style="width: 85px; ">
    <div class="DataTables_sort_wrapper">
        <!-- NEED FLOATED SPAN HERE-->Rate Package
        <span class="css_right ui-icon ui-icon-carat-2-n-s"></span>
    </div>
 </th>

基于浮动,它包装它。th 中似乎有足够的空间来容纳两者。我建议两件事之一:

  1. 通过 th 标签上的类指定最小宽度/最大宽度。
  2. 向 datatables.net 提交修复票。我还没有时间玩转代码并深入研究代码。
于 2012-05-30T20:20:16.480 回答
1

包装问题是因为 th:after 的浮动右侧。我找到了一个解决位置的解决方案。只需使用这个 css:

table.dataTable thead th {
    position: relative;
    padding-right: 20px;
}
table.dataTable thead th:after {
    position: absolute !important;
    right: 0px;
}

使用 padding-right 可以防止重叠,使用绝对位置可以将箭头定位在右侧。

于 2014-07-18T23:28:47.053 回答
1

你会在这个问题上遇到困难,我很想被证明是错误的,这样我就可以修复我自己的应用程序。原因如下:

任何给定列的默认“最小宽度”行为是标题文本或任何给定列中最宽的单词中较窄的一个。一个有助于澄清的示例:假设暂时没有箭头 - 您有一个标题为“名称”的列,该列中的单元格格式为“名字 [空格] 姓氏”。在该列的某处,其中一个单元格包含“Consuela Ruiz”。在根据自己的算法开始补偿之前,该列可以尽可能窄,以包含“Consuela”。

因此,要使箭头成为该计算的一部分,它们必须是非浮动跨度,这使得定位在每个 TH 的右侧变得更加棘手。

我最终做出的妥协是这样的:

  1. 以您想要的方式布置标题。找出你需要给它们的宽度(以 % 或 px 为单位),以便根据标题而不是内容对表格进行优化。

  2. 将 TD 元素设置为 haveoverflow: hiddentext-overflow省略号。

  3. fnDrawCallbackDataTables 参数中(可能有更好的地方来执行此操作,这正是我碰巧选择的),设置一个函数,该函数采用每个表格单元格并将其内容设置为其标题(从而允许本机工具提示显示截断的列徘徊)。

于 2011-12-22T17:32:47.700 回答