JQuery在多個插件後更改寬度

我正在使用this plugin在表中使用可滾動的tbody來製作表格。還有很多關於jQuery或純CSS可滾動tbody元素的其他問題，但沒有任何涉及到我的問題。JQuery在多個插件後更改寬度

問題是我還使用了一個jQuery tablefilter插件，它爲過濾器添加了一個額外的標題行。當我加載tablescroll插件時，它會覆蓋表格尺寸，我的標題不再匹配。

這些列是可變寬度，而tablescroll插件假定它們長度相同，導致不正確的對齊。

我試圖使用javascript 手動復位這裏他們：

var $table = $(".tablescroll"), 
$cols = $(".tablescroll tr td").slice(0,5), 
$th = $(".fixedHeader tr th"); 
$table.tableScroll(); 
$filter = $(".filterRow th"); 
$.each($th, function(index, value){ 
     $th[index].style.width = $cols[index]['clientWidth']; 
     $filter[index].style.width = $cols[index]['clientWidth']; 
});

，並添加正確的風格屬性，每個th但頭部保持相同的不正確對齊。這也是非常最後 JavaScript加載在頁面上。

這裏是我的HTML：

<form> 
<table class="tablescroll"> 
      <thead class="fixedHeader"> 
      <tr> 
       <th>Name</th> 
       <th>Description</th> 
       <th>Site</th> 
       <th>Created Date</th> 
       <th>Modified Date</th> 
      </tr> 
     </thead> 
        <tbody> 
      <tr> 
       <td>Test Name</td> 
       <td>Test Description</td> 
       <td>Test Site</td> 
       <td>2013-12-18 15:20:05</td> 
       <td>2014-01-29 19:36:09</td> 
      </tr> 
        </tbody> 
    </table> 

</form>

我很好奇，爲什麼我的javascript調用添加的風格，但改變一無所知的外觀和我是否應該用這個插件可以繼續，或者簡單地制定出一個純CSS解決方案。

在此先感謝。

來源

2014-04-08 Nathan Foss

像@ jkgm777說，插件移除報頭，並且爲它們創建一個新的表。這拋出了引用行爲的特定表中引用頭類的所有css和js。

我的解決方案將需要一個純CSS版本，由於排序和過濾功能，不會跨表工作。

來源

2014-04-08 17:18:02

您是否嘗試設置表格的內聯樣式而不是使用Javascript？

<table style="width:##px;">

或爲標題列直接

<tr><th style="width:##px;"></th></tr>

來源

2014-04-08 16:12:33 Kennyomar

這就是js完成如果您查看頁面源代碼。但是，通過js抽象它可以讓我在多個地方使用它，就像我想要的那樣。 –

您的標題根據數據而變化？最小寬度和最大寬度有什麼範圍？您的表格標題的寬度將根據行的內容重新調整大小，如果您放置最大寬度並且單元格的內容太長，則會將您的文本包裝在多行中。 – Kennyomar

對不起，我誤解了你的回覆。每列都有一個定義的寬度，從列到列不一樣。我編輯了我的評論，以反映我爲什麼使用js。 –

JQuery在多個插件後更改寬度

回答

相關問題