Question

在使用tablesorter css默认主题时，如果我避免设置表格宽度，我会得到一个漂亮的表格，所有列都完美地调整到最长的字段。但是，如果我添加过滤器小部件，所有列都显示比以前更宽，有很多空白空间。有时文本列会被包装，而其他文本列看起来几乎是空的。

可以避免这种行为吗？谢谢！

Answer 1

过滤器输入的固有大小取决于浏览器，版本和操作系统。因此，简单地将输入添加到表格单元格中会将其拉伸到该大小。但您可以使用css设置max-width或width。

我与你共享updated the demo，用这个css来展示如何覆盖主题集样式：

.tablesorter, .tablesorter .tablesorter-filter {
    width: auto;
}

如果您希望列更窄，只需将输入宽度设置为像素大小（demo）：

.tablesorter {
    width: auto;
}
.tablesorter .tablesorter-filter {
    width: 50px;
}

更新：如果您需要不同的宽度输入，请尝试此css（demo）：

.tablesorter .tablesorter-filter-row td:nth-child(4n+1) .tablesorter-filter {
    width: 80px;
}
.tablesorter .tablesorter-filter-row td:nth-child(4n+2) .tablesorter-filter {
    width: 40px;
}

4中的4n是表格中的列数（从1开始的索引）

Answer 2

您可以使用以下样式更改每个文本框的大小

#sites_list_table .tablesorter-filter-row td>[data-column="1"] {
    width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="4"] {
    width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="6"] {
    width: 100px;
}

（#sites_list_table是表格的id）

Answer 3

摆脱一些空白空间的另一种方法是将宽度设置为100％

.tablesorter .tablesorter-filter {
    width: 100%;
}

使用Tablesorter +过滤器的列宽

3 个答案: