JQuery数据表-JQuery UI主题，箭头环绕在

我正在使用带有jQueryUI主题的datatables，对于可排序的列，一些TH会使用小箭头图标对该列进行排序

我有大约7列正在显示。对于包含少量文本（不比实际第TH个文本宽）的TDs，箭头图标环绕在第TH个文本上。关于如何使所有TH标签都不会包装文本，有什么想法吗？我尝试在每一列中添加'sClass:nowrap'，然后创建一个css nowrap类，该类使用空格：nowrap，但这只适用于TD，而不适用于TH

---

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

这一列的宽度将非常困难，我希望被证明是错误的，这样我就可以修复我自己的应用程序了。原因如下：

任何给定列的默认“最小宽度”行为是标题文本或任何给定列中最宽的单词中较窄的一个。一个有助于澄清的示例：假设暂时没有箭头——您有一个标题为“Name”的列，该列中的单元格格式为“firstname[space]lastname”。在该列的某个地方，其中一个单元格包含“Consuela Ruiz”。在开始根据自己的算法进行补偿之前，列可以尽可能窄地包含“Consuela”

因此，要使箭头成为计算的一部分，它们必须是非浮动跨距，这使得在每个跨距的右侧定位更加困难

我最终做出的妥协是：

按照您想要的方式布置标题。计算出需要给它们的宽度（以%或px表示），以便根据标题而不是内容优化表

将TD元素设置为具有

溢出：隐藏

和

文本溢出

省略号

在

fnDrawCallback

DataTables参数中（可能有更好的地方可以这样做，这正是我要选择的），设置一个函数，该函数接受每个表单元格并将其内容设置为其标题（从而允许本机工具提示在悬停时显示截断的列）

---

你将有一个艰难的时间与这一点，我希望被证明是错误的，这样我就可以修复我自己的应用程序。原因如下：

任何给定列的默认“最小宽度”行为是标题文本或任何给定列中最宽的单词中较窄的一个。一个有助于澄清的示例：假设暂时没有箭头——您有一个标题为“Name”的列，该列中的单元格格式为“firstname[space]lastname”。在该列的某个地方，其中一个单元格包含“Consuela Ruiz”。在开始根据自己的算法进行补偿之前，列可以尽可能窄地包含“Consuela”

因此，要使箭头成为计算的一部分，它们必须是非浮动跨距，这使得在每个跨距的右侧定位更加困难

我最终做出的妥协是：

按照您想要的方式布置标题。计算出需要给它们的宽度（以%或px表示），以便根据标题而不是内容优化表

将TD元素设置为具有

溢出：隐藏

和

文本溢出

省略号

在

fnDrawCallback

DataTables参数中（可能有更好的地方可以这样做，这正是我要选择的），设置一个函数，该函数接受每个表单元格并将其内容设置为其标题（从而允许本机工具提示在悬停时显示截断的列）

---

将此CSS添加到您的页面

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

table.display thead th span.css_right{
浮动：对；
}

将此CSS添加到您的页面

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

table.display thead th span.css_right{
浮动：对；
}

确保侧面没有填充物。为我解决了这个问题

确保侧面没有填充物。为我解决了这个问题

我也有这个问题。在深入研究代码之后，基本原因是当dataTables使用jQuery UI重新计算/重新填充TheAD时，它会在div中插入一个浮动的span，但不会用浮动的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标记上的类指定th最小宽度/最大宽度

向datatables.net提交修复票证。我还没来得及仔细研究代码

---

我也有这个问题。在深入研究代码之后，基本原因是当dataTables使用jQuery UI重新计算/重新填充TheAD时，它会在div中插入一个浮动的span，但不会用浮动的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标记上的类指定th最小宽度/最大宽度

向datatables.net提交修复票证。我还没来得及仔细研究代码

---

包装问题是因为th:after的浮动权。 我找到了一个利用位置的解决方案。 只需使用以下css：

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

---

使用右侧填充，我可以防止重叠，使用绝对位置，箭头可以定位在右侧。

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

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

使用右侧填充可以防止重叠，使用绝对位置可以将箭头定位在右侧。

这很奇怪，e