如何减少tablesorter中的列宽答案

【问题标题】：How to reduce the width of columns in tablesorter如何减少tablesorter中的列宽
【发布时间】：2016-04-19 02:44:00
【问题描述】：

我正在尝试设置 JQuery Tablesorter 中列的宽度。

我有一个例子http://jsfiddle.net/4mVfu/5647/

我有 6 列。我正在尝试调整适合我的浏览器窗口的宽度，但由于某种原因，我无法调整标题的宽度和<body> 标记中的项目。
在示例中，我希望第一列为 10%，第二列为 10%，第三列为 10%，第四列为 50%，其余两行为 10%，每行加起来为 100%。我试过这个：

.tablesorter td:nth-child(6n+1) {
width: 10%;
 }
.tablesorter td:nth-child(6n+2) {
width: 10%;
}
.tablesorter td:nth-child(6n+3) {
width: 10%;
}
.tablesorter td:nth-child(6n+4) {
width: 50%;
  }
 .tablesorter td:nth-child(6n+5) {
width: 10%;
 }
 .tablesorter td:nth-child(6n+6) {
width: 10%;
  }

有什么建议吗？

【问题讨论】：

为我工作：jsfiddle.net/Mottie/4mVfu/5649，如果你想调整列的大小，你需要将'resizable' 添加到widgets 选项，但是你将无法调整大小列。
顺便说一下，如果一个表格列的数据多于其指定宽度的容量，则该表格只会使其尽可能宽。在@Mottie 的小提琴中，窄窗口中较宽的列会发生这种情况。使视口足够宽，表格将遵循其 css。

标签： css tablesorter

【解决方案1】：

您可以一次将宽度应用于多列。

.tablesorter  td:nth-child(1),
.tablesorter  td:nth-child(2),
.tablesorter  td:nth-child(3),
.tablesorter  td:nth-child(5),
.tablesorter  td:nth-child(6)
{
  width : 10% !important;
  min-width : 100px !important;
}
.tablesorter  td:nth-child(4)
{
  width : 50% !important;
  min-width : 200px !important;
}

mid-width 这里只是为了保持良好的外观和感觉。但是您可以尝试玩弄并找出预期的行为。

还可以尝试在小部件选项中设置resizable_widths: [ '10%', '10%', '10%','50%','10%','10%']。但我相信此选项的目的是保持可调整大小的宽度。请参阅小部件的文档，它可能会有所帮助。

JSFiddle： http://jsfiddle.net/cL2f6k18/

【讨论】：

在这种情况下，!important 标志不是必需的。