如何在数据表中停止YADCF过滤器以弄乱标题单元格宽度

Question

当我向数据表添加一些YADCF过滤器时，列的大小调整变得混乱（如图中所示）。是否有可能阻止这种情况？

没有过滤器

使用过滤器

---------------编辑-----------------

在丹尼尔的怂恿下，结果如下：

NOWRAP

正如你所看到的，它还不好...... 为什么yadcf过滤器会增加TH的大小？

Answer 1

你必须明白，当你添加一个宽的（r）元素时，你的表格标题（以前更薄）你的表格宽度会变得更大（并且很好）

我可以建议以下解决方案：

1）减小yadcf过滤器的宽度（将宽度属性应用于.yadcf-filter类）

2）使用scrollX

3）使用filter_container_id属性

将过滤器放在桌子外面

---

p.s为了克服标题文本的破坏，您可以使用以下css

table th {
    white-space: nowrap;
    min-width: 150px;
}

Answer 2

这不是yacdf调整列的大小，调整大小是一件复杂的事情。 yacdf只是放置一个文本输入元素，它继承了一定的宽度（不一定是yacdf），然后dataTables对该输入元素的存在做出反应。这也是一个愚蠢的HTML表格的自然行为BTW，虽然dataTables在后台有很多计算，具体取决于你是否启用了X滚动，或者你是否启用了自动宽度计算。 yadcf无法为您做的是查看标题的 final 宽度并巧妙地调整输入文本元素的宽度。列的最终宽度不是一件简单的事情，主要是由dataTables计算（除非你关闭autoWidth - 见后面 - 但即使在autoWidth关闭的情况下，还有一些小小的摆动）。 / p>

当您的桌子调整大小时，会有更多情况出现。在你的情况下，最重要的是

1. 文本输入元素的宽度，过滤器带来的内容。您可以通过自定义与正确类相关的CSS，为每列单独覆盖搜索框的宽度。在你的情况下改变前四列的大小＆＃39;过滤器：

假设您的表格中包含id＆＃39; reportTable＆＃39;，HTML标记：

<table id="reportTable" class="table table-condensed table-striped table-bordered">
    <thead></thead>
    <tbody></tbody>
</table>

CSS可以是：

#yadcf-filter--reportTable-0 {
    width: 40px !important;
    max-width: 40px !important;
}

#yadcf-filter--reportTable-1 {
    width: 40px !important;
    max-width: 40px !important;
}

#yadcf-filter--reportTable-2 {
    width: 60px !important;
    max-width: 60px !important;
}

#yadcf-filter--reportTable-3 {
    width: 60px !important;
    max-width: 60px !important;
}

请注意，您覆盖的文本输入元素的宽度可能会受到您使用的其他框架的影响。我使用Twitter引导程序。另请注意，yadcf包含了许多元素，并使用具有特定类和ID的div进行控制。这些包装的目的正是为了让您有机会通过CSS微调外观和行为。

其他建议：

1. 因为我看到你有很多列而且它们不是太宽。我看到你已经禁用了某些列的清除按钮。如果那个按钮无论如何都不合适，这很好。这可以通过为相应的列提供filter_reset_button_text: false来完成。 yacdf init期间的配置。我想你明白了。

2. 如果标题中的空格真的没空，正如Daniel提到的那样，您可以将过滤器控件移出标题。

3. 也可以阅读dataTables配置选项，例如autoWidth，查看相关选项，API和事件：http://datatables.net/reference/option/autoWidth

在更多应用程序中，我最终通过CSS完全显式控制列宽，否则它们只是被dataTables宽度计算和本机HTML表行为所左右。如果你想要响应式设计，这是不可取的。看起来你有复杂的标题，所以你在某种程度上知道dataTables。

最后，我们在您的最终屏幕截图中看到的是输入文本元素的存在会强制这些列加宽，这会强制其他列缩小。这种缩减到目前为止，dataTable的排序bacground图标与列标题重叠。如果你有太多的标题和没有足够的水平空间，你可能没有其他选择，只能打开dataTables的水平滚动（丹尼尔也提到了Scroll X）。这会使dataTable松弛，并且可以延伸到表格中：http://datatables.net/reference/option/scrollX