用的tablesorter＆純CSS滾動表

Question

表頭對準我與的tablesorter過濾器/搜索功能的表。現在我試圖向它添加一個滾動條，並使用「純CSS可滾動表格」技術。 （website） 但我不能對齊工作...

Here's a demo

我這樣設置每列的寬度：

table#eventlist td:nth-child(1), table#eventlist th:nth-child(1) { width: 250px; } 
table#eventlist td:nth-child(2), table#eventlist th:nth-child(2) { width: 250px; } 
table#eventlist td:nth-child(3), table#eventlist th:nth-child(3) { width: 200px; } 
table#eventlist td:nth-child(4), table#eventlist th:nth-child(4) { width: 200px; } 

（我想用滾輪，wedget那我發現在tablesorter網站上，但事實證明，它不工作，因爲它不支持過濾器格式化程序設置。 ）

Answer 1

這是一個不錯的發現！我必須用這種方法「修復」我的Scroller小部件（我討厭）。

反正固定取向的問題，我發現，這三個寬度設置需要進行設置，盒大小一起。

{ width: 250px; min-width: 250px; max-width: 250px; } 

我更新your demo並作出了一些調整，使水平滾動條不會在Chrome中顯示出來。我不知道如何風格滾動條上方的白色盒子，可是...

#tableContainer * { 
    box-sizing: border-box; 
} 
/* define height and width of scrollable area. Add 16px to width for scrollbar */ 
div.tableContainer { 
    clear: both; 
    height: 340px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 916px 
} 

/* Reset overflow value to hidden for all non-IE browsers. */ 
/* define width of table. Add 16px to width for scrollbar. */ 
html>body div.tableContainer { 
    overflow: hidden; 
    width: 916px 
} 

/* define width of table. IE browsers only */ 
div.tableContainer table { 
    float: left; 
    width: 900px; 
} 

/* All other non-IE browsers. */ 
html>body div.tableContainer table { 
    width: 916px; 
} 

/* set table header to a fixed position. WinIE 6.x only 
In WinIE 6.x, any element with a position property set to relative and is a child 
of an element that has an overflow property set, the relative value translates 
into fixed. 
Ex: parent element DIV with a class of tableContainer has an overflow property 
set to auto 

thead.fixedHeader tr { position: relative } 

set THEAD element to have block level attributes. All other non-IE browsers this 
enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ 

html>body thead.fixedHeader tr { 
    display: block 
} 

/* define the table content to be scrollable            
set TBODY element to have block level attributes. All other non-IE browsers    
this enables overflow to work on TBODY element. All other non-IE, non-Mozilla 
browsers induced side effect is that child TDs no longer accept 
width: auto */ 
html>body tbody.scrollContent { 
    display: block; 
    height: 262px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 100% 
} 

/* define width of TH elements: 1st, 2nd, and 3rd respectively.  
Add 16px to last TH for scrollbar padding. All other non-IE browsers. */ 
table#eventlist td:nth-child(1), 
table#eventlist th:nth-child(1), 
table#eventlist td:nth-child(2), 
table#eventlist th:nth-child(2) { 
    width: 250px; 
    min-width: 250px; 
    max-width: 250px; 
} 

table#eventlist td:nth-child(3), 
table#eventlist th:nth-child(3), 
table#eventlist td:nth-child(4), 
table#eventlist th:nth-child(4) { 
    width: 200px; 
    min-width: 200px; 
    max-width: 200px; 
} 

Answer 2

嘗試添加一個CSS規則將所有設置爲box-sizing: border-box，黑客下面將解決您的定位，但可能是矯枉過正：

* { 
    box-sizing: border-box; 
} 

Answer 3

我能夠解決類似的對齊問題：

.tablesorter-scroller-header, .tablesorter-scroller-footer { 
    width: 100% !important; /* need this or table and scroller do not align. -ac 11/21/2017 */ 
} 

（添加這裏尋找未來的搜索線索...）