Question

我使用的是以下代码

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

对于此列，信息和本地Conttent具有数据的两个单词。那时也是显示非常大。我需要限制特定列的大小。

任何解决方案都值得赞赏。谢谢。

Answer 1

要限制列宽，请使用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; }

或者，您可以在<col>

中添加定义宽度的<colgroup>

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

通过使用tablesorter如何指定td大小？

1 个答案: