html 表格水平滾動啟用特定列

Question

讓我們考慮下圖。 我正在生成員工工作時間的月度報告。當水平滾動條向右移動時，我希望code,name, area, territory列固定在其 position 上，並且日期列應該是水平滾動的。 向右滾動時，日期列應位於code,name, area, territory列組下方的 go。 我該怎么做？ 是否有任何可用的 css 技巧或插件？

Answer 1

我認為根據@Circuit Breaker答案修復列的最簡單和合乎邏輯的方法是

 .view { margin: auto; width: 600px; }.wrapper { position: relative; overflow: auto; border: 1px solid black; white-space: nowrap; }.sticky-col { position: sticky; position: -webkit-sticky; background-color: white; }.first-col { width: 100px; min-width: 100px; max-width: 100px; left: 0px; }.second-col { width: 150px; min-width: 150px; max-width: 150px; left: 100px; }

 <div class="view"> <div class="wrapper"> <table class="table"> <thead> <tr> <th class="sticky-col first-col">Number</th> <th class="sticky-col second-col">First Name</th> <th>Last Name</th> <th>Employer</th> </tr> </thead> <tbody> <tr> <td class="sticky-col first-col">1</td> <td class="sticky-col second-col">Mark</td> <td>Ham</td> <td>Micro</td> </tr> <tr> <td class="sticky-col first-col">2</td> <td class="sticky-col second-col">Jacob</td> <td>Smith</td> <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td> </tr> <tr> <td class="sticky-col first-col">3</td> <td class="sticky-col second-col">Larry</td> <td>Wen</td> <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td> </tr> </tbody> </table> </div> </div>