如何使用表分类器指定td大小 - By using tablesorter how to specify th td size?

By using tablesorter how to specify th td size?

本文关键字：td 大小分类器何使用 | 更新日期: 2023-09-27

我使用以下代码

<table class="tablesorter custom-popup"><thead><tr>
 <th class="filter-false"   data-sorter="false"></th> 
   <th>Host</th><th>Status</th><th>place</th>           
  <th>Local Content</th><th>user</th><th>Drive</th>
  <th>Capable</th><th>Test</th><th>Customer</th><th ">Info</th>

对于这列，th info和local Conttent有两个单词的数据。那一次显示非常大。我需要限制特定列的大小。

任何解决方案都是可观的。提前谢谢。

要限制列宽，请使用css 设置列大小

可以通过在每列中添加类名来实现这一点：

HTML

<th class="filter-false narrow" data-sorter="false"></th>
<th class="host">Host</th>
<th class="status">Status</th>
<!-- ... -->
<th class="info">Info</th>

CSS

.narrow { width: 25px; }
.host { width: 100px; }
.status { width: 50px; }
/* ... */
.info { width: 100px; }

或者使用纯css（只需要针对一个标题行）

.custom-popup th:nth-child(1) { width: 25px; }
.custom-popup th:nth-child(2) { width: 100px; }
.custom-popup th:nth-child(3) { width: 50px; }
/* ... */
.custom-popup th:nth-child(11) { width: 100px; }

或者，您可以在<colgroup> 内添加一个具有定义宽度的<col>

<table class="tablesorter custom-popup">
  <colgroup>
    <col style="width:25px">
    <col style="width:100px">
    <col style="width:50px">
    <!-- ... -->
    <col style="width:100px">
  </colgroup>
  <thead>
    <!-- ... -->
  </thead>
  <tbody>
    <!-- ... -->
  </tbody>
</table>