在 html 表的 tbody 中設置滾動時出現問題 - 對齊被破壞

Question

我有一張這樣的桌子：

 var mytable2 = "<tbody id='dynamic_table_2'><tr>"; for (var i = 1; i < 51; i++) { if (i % 5 == 1 && i;= 1) { mytable2 += "</tr'><tr>"; } mytable2 += "<td>" + i + "</td>"; } mytable2 += "</tr></tbody></table>". $('#here2');append(mytable2);

 .container th h1 { font-weight: bold; font-size: 1em; text-align: center; color: #185875; }.container td { font-weight: normal; font-size: 1em; text-align: center; padding: 5px; -webkit-box-shadow: 0 2px 2px -2px #0E1119; -moz-box-shadow: 0 2px 2px -2px #0E1119; box-shadow: 0 2px 2px -2px #0E1119; }.container { text-align: left; overflow: hidden; width: 100%; margin: 0 auto; display: table; padding: 0 0 8em 0; }.container td, .container th { padding-bottom: 2%; padding-top: 2%; padding-left: 2%; } /* Background-color of the odd rows */.container tr:nth-child(odd) { background-color: #323C50; } /* Background-color of the even rows */.container tr:nth-child(even) { background-color: #2C3446; }.container th { background-color: #1F2739; }.container td:first-child { color: #FB667A; }.container tr:hover { background-color: #464A52; -webkit-box-shadow: 0 6px 6px -6px #0E1119; -moz-box-shadow: 0 6px 6px -6px #0E1119; box-shadow: 0 6px 6px -6px #0E1119; }.container td:hover { background-color: #FFF842; color: #403E10; font-weight: bold; box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px; transform: translate3d(6px, -6px, 0); transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: line; } @media (max-width: 800px) {.container td:nth-child(4), .container th:nth-child(4) { display: none; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="container" id="here2" style="font-family: Arial"> <thead> <tr> <th> <h1>Column1</h1> </th> <th> <h1>Column2</h1> </th> <th> <h1>Column3</h1> </th> <th> <h1>Column4</h1> </th> <th> <h1>Column5</h1> </th> </tr> </thead> </table>

一切正常，我的桌子看起來像 .

當我想為此表的tbody使用垂直滾動條時，問題就開始了。

從 SO 中的大量搜索中，我終於找到了一些可行但不完美的東西。 其他人建議使用style='display:block;height:100px;overflow:auto; 對於tbody和style='display:table;table-layout:fixed;' 對於tr s。 當我這樣做時，滾動條顯示並且可用，但突然所有單元格都被拉到tbody的右側（我正在使用 RTL 設置），它看起來像這個圖像： 這不酷！ 事實上tbody的單元格不再與thead中的單元格對齊 ..!! 我真的很困惑。 我已經嘗試了很多東西，但似乎不知道該怎么做才能解決這個問題。

Answer 1

如果您的滾動條沒有在任何可能的瀏覽器中重新設置樣式，則其寬度平均為1.1rem

然后，您可以設置thead的樣式，注意這個寬度，並設置padding或將thead設置為帶有scrollbar的block ，該滾動條通過overflow-x:scroll與它自己的寬度完全匹配。

帶有overflow-x:scroll thead選項

 var mytable2 = "<tbody id='dynamic_table_2'><tr>"; for (var i = 1; i < 51; i++) { if (i % 5 == 1 && i;= 1) { mytable2 += "</tr'><tr>"; } mytable2 += "<td>" + i + "</td>"; } mytable2 += "</tr></tbody></table>". $('#here2');append(mytable2);

 .container th h1 { font-weight: bold; font-size: 1em; text-align: center; color: #185875; }.container td { font-weight: normal; font-size: 1em; text-align: center; padding: 5px; -webkit-box-shadow: 0 2px 2px -2px #0E1119; -moz-box-shadow: 0 2px 2px -2px #0E1119; box-shadow: 0 2px 2px -2px #0E1119; }.container { text-align: left; overflow: hidden; width: 100%; margin: 0 auto; display: table; padding: 0 0 8em 0; }.container td, .container th { padding-bottom: 2%; padding-top: 2%; padding-left: 2%; } /* Background-color of the odd rows */.container tr:nth-child(odd) { background-color: #323C50; } /* Background-color of the even rows */.container tr:nth-child(even) { background-color: #2C3446; }.container th { background-color: #1F2739; }.container td:first-child { color: #FB667A; }.container tr:hover { background-color: #464A52; -webkit-box-shadow: 0 6px 6px -6px #0E1119; -moz-box-shadow: 0 6px 6px -6px #0E1119; box-shadow: 0 6px 6px -6px #0E1119; }.container td:hover { background-color: #FFF842; color: #403E10; font-weight: bold; box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px; transform: translate3d(6px, -6px, 0); transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: line; } @media (max-width: 800px) {.container td:nth-child(4), .container th:nth-child(4) { display: none; } } tbody { display:block;height:100px;overflow:auto; } tr{display:table;table-layout:fixed;width:100%;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="container" id="here2" style="font-family: Arial;"> <thead style=" overflow-y:scroll;display:block;"> <tr> <th> <h1>Column1</h1> </th> <th> <h1>Column2</h1> </th> <th> <h1>Column3</h1> </th> <th> <h1>Column4</h1> </th> <th> <h1>Column5</h1> </th> </tr> </thead> </table>

或thead上的平均padding方法：（實際上是How to set tbody height with overflow scroll的副本）

 var mytable2 = "<tbody id='dynamic_table_2'><tr>"; for (var i = 1; i < 51; i++) { if (i % 5 == 1 && i;= 1) { mytable2 += "</tr'><tr>"; } mytable2 += "<td>" + i + "</td>"; } mytable2 += "</tr></tbody></table>". $('#here2');append(mytable2);

 .container th h1 { font-weight: bold; font-size: 1em; text-align: center; color: #185875; }.container td { font-weight: normal; font-size: 1em; text-align: center; padding: 5px; -webkit-box-shadow: 0 2px 2px -2px #0E1119; -moz-box-shadow: 0 2px 2px -2px #0E1119; box-shadow: 0 2px 2px -2px #0E1119; }.container { text-align: left; overflow: hidden; width: 100%; margin: 0 auto; display: table; padding: 0 0 8em 0; }.container td, .container th { padding-bottom: 2%; padding-top: 2%; padding-left: 2%; } /* Background-color of the odd rows */.container tr:nth-child(odd) { background-color: #323C50; } /* Background-color of the even rows */.container tr:nth-child(even) { background-color: #2C3446; }.container th { background-color: #1F2739; }.container td:first-child { color: #FB667A; }.container tr:hover { background-color: #464A52; -webkit-box-shadow: 0 6px 6px -6px #0E1119; -moz-box-shadow: 0 6px 6px -6px #0E1119; box-shadow: 0 6px 6px -6px #0E1119; }.container td:hover { background-color: #FFF842; color: #403E10; font-weight: bold; box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px; transform: translate3d(6px, -6px, 0); transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: line; } @media (max-width: 800px) {.container td:nth-child(4), .container th:nth-child(4) { display: none; } } tbody { display:block;height:100px;overflow:auto; } tr{display:table;table-layout:fixed;width:100%;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="container" id="here2" style="font-family: Arial;"> <thead style="padding-right:1.1rem;display:table;"> <tr> <th> <h1>Column1</h1> </th> <th> <h1>Column2</h1> </th> <th> <h1>Column3</h1> </th> <th> <h1>Column4</h1> </th> <th> <h1>Column5</h1> </th> </tr> </thead> </table>

還有display:grid + display:contents選項或包裝器和position:sticky 。 如果所有這些 CSS 選項似乎都不夠好，最后一個選項是在 javascript 上進行中繼。