使用Tablesorter +过滤器的列宽度

使用tablesorter css默认主题时，如果我避免设置表格宽度，我会得到一个很好的表格，并且所有列都可以完美地调整到最长的字段。但是，如果我添加过滤器小部件，所有列出现比以前更宽，有很多空的空间。有时文本列被封装，而其他文章几乎空着。使用Tablesorter +过滤器的列宽度

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

来源

2013-05-03 jm_

你能分享一个例子吗？您可以使用[此演示]（http://jsfiddle.net/Mottie/abkNM/）作为您的代码的基础。 – Mottie 2013-05-04 01:10:19

[Here]（http://jsfiddle.net/abkNM/687/）我删除了css主题以避免宽度：100％参数。这将是所需的列宽分布。但是，当我添加过滤器小部件，看到它[这里]（http://jsfiddle.net/abkNM/688/），列宽太长，不适合领域。 – 2013-05-04 07:06:11

过滤器输入的固有大小取决于浏览器，版本和操作系统。所以简单地将一个输入添加到表格单元格中会将其拉伸到该大小。但您可以使用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; 
}

其中4n的4是表中的列的数目（一个基于索引）

来源

2013-05-04 14:15:46 Mottie

谢谢！那就是诀窍。 – 2013-05-05 19:16:05

另一种方式去掉一些空的空间的宽度设定为100％

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

来源

2015-04-21 14:37:39 Sosian

如果你在你的表中的数据不间断的字符串，您可能需要尝试改变：

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-10 18:16:58

您可以使用以下样式

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

更改每个文本boxe的大小

来源

2016-04-27 10:25:24

使用Tablesorter +过滤器的列宽度

回答

相关问题