列宽度与Tablesorter+过滤器

Question

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

这种行为可以避免吗?谢谢!

Answer 1

过滤器输入的固有大小取决于浏览器、版本和操作系统。因此，只需在表格单元格中添加一个输入，就可以将其拉伸到这个大小。但是您可以使用css设置max-width或width。

我已经更新了你分享的演示，用这个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;
}

其中4n中的4为表(单索引)的列数

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

如果您的表数据中有未分割的字符串，您可能需要尝试更改:

table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}

:

table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
    max-width:400px;
    word-wrap:break-word;
}

(这对我在Chrome和IE11中工作)

Answer 4

另一种消除空白的方法是将宽度设置为100%

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