Question

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

我显示了大约7列。对于具有少量文本（不比实际TH文本宽）的TD，箭头图标包裹在TH上。有关如何使所有TH标签不包装文本的任何想法？我尝试将'sClass：nowrap'添加到每个列，然后创建一个使用white-space：nowrap的css nowrap类，但这只适用于TD而不是TH。

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

Answer 1

将此CSS添加到您的页面

<style type="text/css">
table.display thead th span.css_right {
  float: right;
}
</style>

Answer 2

你将会遇到这个问题，我很想被证明是错的，这样我就可以修复自己的应用程序了。原因如下：

任何给定列的默认“最小宽度”行为是标题文本或任何给定列中最宽的单词的较窄者。一个帮助澄清的例子：假装暂时没有箭头 - 你有一个标题为“Name”的列，该列中的单元格格式为“firstname [space] lastname”。在该列的某处，其中一个单元格包含“Consuela Ruiz”。该列可以像在根据自己的算法开始补偿之前包含“Consuela”一样窄。

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

我最终做出的妥协是：

按照您想要的方式排列标题。找出你需要给它们的宽度（以％或px表示），以便根据标题而不是内容对表进行优化。
将道明元素设置为overflow: hidden和text-overflow省略号。
在fnDrawCallback DataTables参数中（可能有一个更好的地方可以做到这一点，这正是我要选择的），设置一个函数，它接受每个表格单元格并将其内容设置为title（从而允许原生工具提示在悬停时显示截断的列）。

Answer 3

确保两侧没有衬垫。解决了我的问题！

Answer 4

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

<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标签上的类指定最小宽度/最大宽度。
向datatables.net提交修复票证。我没有时间玩游戏并过于深入地挖掘代码。

Answer 5

包装问题是因为浮动权利：之后。我找到了解决问题的解决方案。只需使用此css：

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

使用填充 - 右边防止重叠，位置绝对，箭头可以位于右侧。

JQuery DataTables - JQuery UI主题，箭头包装在THE上

5 个答案: