14

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

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

4

4 回答 4

10

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

我已经更新了你分享的演示,使用这个 css 来展示如何覆盖主题集样式:

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

如果您希望列更窄,只需将输入宽度设置为像素大小(演示):

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

更新:如果你需要不同的宽度输入,试试这个 CSS(演示):

.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;
}

其中4in4n是表中的列数(基于 1 的索引)

于 2013-05-04T14:15:46.717 回答
3

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

#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)

于 2016-04-27T10:25:24.387 回答
1

如果您的表数据中有完整的字符串,您可能需要尝试更改:

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 中对我有用)

于 2015-09-10T18:16:58.787 回答
0

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

.tablesorter .tablesorter-filter {
    width: 100%;
}
于 2015-04-21T14:37:39.940 回答