在使用 tablesorter css 默认主题时,如果我避免设置表格宽度,我会得到一个很好的表格,所有列都完美地调整为最长的字段。
但是,如果我添加过滤器小部件,所有列看起来都比以前宽得多,并且有很多空白空间。有时文本列被换行,而另一些看起来几乎是空的。
这种行为可以避免吗?谢谢!
最佳答案
过滤器输入的固有大小取决于浏览器、版本和您的操作系统。因此,只需将输入添加到表格单元格中即可将其拉伸(stretch)到该大小。但是你可以设置一个max-width
或 width
使用 CSS。
我有 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 的索引)
关于tablesorter - 使用 Tablesorter+filter 的列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16368345/