Table header 与 table 排序器和纯 css 可滚动对齐 table

Question

我有一个 table 和 table 排序器 filter/search 功能。现在我正在尝试向它添加一个滚动条并且我正在使用 "Pure CSS Scrollable table" 技术。 (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; }

(我想使用我在 tablesorter 网站上找到的 scroller-wedget。但事实证明它不起作用，因为它不支持过滤器格式化程序设置。 )

Answer 1

尝试添加 CSS 规则以将所有内容设置为 box-sizing: border-box，下面的 hack 将修复您的对齐方式，但可能有点矫枉过正：

* {
  box-sizing: border-box;
}

Answer 2

这是一个不错的发现！我将不得不使用这种方法 "fix" 提高我的滚动条小部件（我讨厌它）。

无论如何要解决对齐问题，我发现需要设置所有三个宽度设置以及框大小。

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

我能够通过以下方式解决类似的对齐问题：

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

（为未来寻找线索的搜索者添加此处...）

Table header 与 table 排序器和纯 css 可滚动对齐 table

Table header alignment with tablesorter & pure css scrollable table

css

tablesorter

scrollable

css-tables