2016-07-25 15 views
1

我使用下面的代碼通過使用tablesorter如何指定th td大小?

<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具有的data.That時間也 兩個詞個顯示非常big.I需要限制日TD尺寸特定的列。

任何解決方案是可觀的。提前感謝。

回答

0

爲了限制列的寬度,用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> 
+0

我可以申請這個CSS的一列,鉸欄默認行爲是可能的嗎? – nani

+0

是的,只需指定一列即可。 – Mottie