我们如何使带有 html 表标题的前三列固定，其他所有列都可以滚动
[英]How we make first three columns with headings of a html table to be fixed and other all columns could be scroll-able
问题描述
This question makes me feel like it's a duplicate, but after going through multiple related threads I have realised... I have gone through most related threads ( fixed columns ) regarding my requirement, and after following the answers I'm faced with some text overlapping issues like below...
这个问题让我觉得它是重复的，但是在经历了多个相关线程之后我意识到......我已经完成了关于我的要求的大多数相关线程（固定列），并且在遵循答案之后我面临一些文本重叠的问题如下...
I am trying to achieve something like make the first three columns with headings of a html table to be fixed, and all other columns could be scroll-able .我正在尝试实现一些事情，例如使html表的标题的前三列固定，并且所有其他列都可以滚动。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> * { margin: 0; padding: 0; } table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { text-align: left; padding: 5px; word-wrap: break-word; } th { background: #444; color: white; } td.width100px div, th.width100px div { width: 100px; } td.width86px div, th.width86px div { width: 86px; } td.width120px div, th.width120px div { width: 120px; } td.width150px div, th.width150px div { width: 150px; } td div { word-break: break-all !important; } tr:nth-child(even) { background: #eee; } #main_container { padding: 10px; overflow: auto; margin: 5px; border: solid 2px darkgrey; } </style> </head> <body> <div id="main_container"> <div style="padding: 5px 0 0 5px;z-index:1;width: 150px;position:sticky;left:0;top:0;margin-bottom: 5px;font-weight: 600;">2020-12-29</div> <div style="width:100%"> <table style="width:100%"> <tr> <th class="width100px"> <div>EmpName</div> </th> <th class="width86px"> <div>EmpIdD</div> </th> <th class="width100px"> <div>MTN</div> </th> <th class="width120px"> <div>WorkingTime</div> </th> <th class="width86px"> <div>StartTime</div> </th> <th class="width150px"> <div>Location</div> </th> <th class="width86px"> <div>LunchTime</div> </th> <th class="width150px"> <div>Location</div> </th> <th class="width86px"> <div>EndTime</div> </th> <th class="width150px"> <div>Location</div> </th> </tr> <tr> <td class="width100px"> <div>William Reehil</div> </td> <td class="width86px"> <div>12345</div> </td> <td class="width100px"> <div>91657897698</div> </td> <td class="width120px"> <div>09:00-17:00</div> </td> <td class="width86px"> <div>10:30</div> </td> <td class="width150px"> <div>13th Street. 47 W 13th St, New York, NY 10011, USA</div> </td> <td class="width86px"> <div>13:00</div> </td> <td class="width150px"> <div>NewYark</div> </td> <td class="width86px"> <div>16:50</div> </td> <td class="width150px"> <div>NewYark</div> </td> </tr> <tr> <td class="width100px"> <div>William Reehil</div> </td> <td class="width86px"> <div>12345</div> </td> <td class="width100px"> <div>91657897698</div> </td> <td class="width120px"> <div>09:00-17:00</div> </td> <td class="width86px"> <div>10:30</div> </td> <td class="width150px"> <div>NewYarkNNewYark NewYark</div> </td> <td class="width86px"> <div>13:00</div> </td> <td class="width150px"> <div>NewYark</div> </td> <td class="width86px"> <div>16:50</div> </td> <td class="width150px"> <div>NewYark</div> </td> </tr> </table> </div> <div style="padding: 5px 0 0 5px;z-index:1;width: 150px;position:sticky;left:0;top:0;margin-bottom: 5px;font-weight: 600;">2020-12-29</div> <div style="width:100%"> <table style="width:100%"> <tr> <th class="width100px"> <div>EmpName</div> </th> <th class="width86px"> <div>EmpIdD</div> </th> <th class="width100px"> <div>MTN</div> </th> <th class="width120px"> <div>WorkingTime</div> </th> <th class="width86px"> <div>StartTime</div> </th> <th class="width150px"> <div>Location</div> </th> <th class="width86px"> <div>LunchTime</div> </th> <th class="width150px"> <div>Location</div> </th> <th class="width86px"> <div>EndTime</div> </th> <th class="width150px"> <div>Location</div> </th> </tr> <tr> <td class="width100px"> <div>William Reehil</div> </td> <td class="width86px"> <div>12345</div> </td> <td class="width100px"> <div>91657897698</div> </td> <td class="width120px"> <div>09:00-17:00</div> </td> <td class="width86px"> <div>10:30</div> </td> <td class="width150px"> <div> NewYark</div> </td> <td class="width86px"> <div>13:00</div> </td> <td class="width150px"> <div>NewYark</div> </td> <td class="width86px"> <div>16:50</div> </td> <td class="width150px"> <div>NewYark</div> </td> </tr> <tr> <td class="width100px"> <div>William Reehil</div> </td> <td class="width86px"> <div>12345</div> </td> <td class="width100px"> <div>91657897698</div> </td> <td class="width120px"> <div>09:00-17:00</div> </td> <td class="width86px"> <div>10:30</div> </td> <td class="width150px"> <div> NewYark</div> </td> <td class="width86px"> <div>13:00</div> </td> <td class="width150px"> <div>NewYark</div> </td> <td class="width86px"> <div>16:50</div> </td> <td class="width150px"> <div>NewYark</div> </td> </tr> </table> </div> </div> </body> </html>
So, finally - I want achieve something like this:所以，最后 - 我想要实现这样的目标：
What things can I try?我可以尝试什么？
1 个解决方案
解决方案1
4 已采纳
You can adapt a standard HTML Table to conform to your needs.您可以调整标准HTML Table以满足您的需要。
With tables the mechanics are laid out nicely in this answer by avernet , so please read that as to the issues you would face regarding directly manipulating the table.对于表格， avernet在这个答案中很好地阐述了机制，因此请阅读有关直接操作表格的问题。
You can make use of wrappers and nth-child class selectors a collection of these can be found here .您可以使用包装器和nth-child class selectors ，可以在此处找到这些的集合。
Now for a demo of how this wrapping works is below...现在，有关此包装如何工作的演示如下...
<!DOCTYPE html> <html> <head> <title></title> <style> .Light{ background-color: lightgrey; } .Dark{ background-color: darkgrey; } table{ border: none; padding:none; margin:none; min-width: 1200px; } table tr th{ padding-left: 15pt; height:24pt; } table tr td, table tr th{ padding: 15pt; min-width: 150px; } .tableWrap{ max-width: 800px; overflow-x: scroll; } .ParentPos{ position: absolute; } .ChildPos{ position: relative; left: 0; right:0; top:-0.575rem; bottom:0px; height: 100% } /*First 3 cells in the header row:*/ table tr th:nth-child(-n+3){ position: absolute; padding-top: 27pt; padding-bottom: 4pt; } /*First 3 cells in the content row:*/ table tr td:nth-child(-n+3){ position: absolute; padding-top: 27pt; padding-bottom: 16.75pt; } table tr th:nth-child(2), table tr td:nth-child(2){ left:145pt; } table tr th:nth-child(3), table tr td:nth-child(3){ left:287pt; } table tr th:nth-child(4){ padding-left: 440pt; } table tr td:nth-child(4){ padding-left: 500pt; } /*Making the spacing even out:*/ table tr th:nth-child(n+5){ padding-left: 0pt; } /*Making the spacing even out:*/ table tr td:nth-child(n+5){ padding-left: 60pt; } /*This sets alternating colours on each odd numbered column:*/ table tr:nth-child(odd) td, table tr:nth-child(odd) th { background-color: lightgrey; } /*This sets alternating colours on each even numbered column:*/ table tr:nth-child(even) td, table tr:nth-child(even) th { background-color: darkgrey; } </style> </head> <body> <div class="tableWrap"> <table cellspacing="0"> <tr> <th> <div class="ParentPos"> <div class="ChildPos"> Heading 1 </div> </div> </td> <th> <div class="ParentPos"> <div class="ChildPos"> Heading 2 </div> </div> </th> <th> <div class="ParentPos"> <div class="ChildPos"> Heading 3 </div> </div> </th> <th>Heading 4</th> <th>Heading 5</th> <th>Heading 6</th> <th>Heading 7</th> </tr> <tr> <td> <div class="ParentPos"> <div class="ChildPos"> Content 1 </div> </div> </td> <td> <div class="ParentPos"> <div class="ChildPos"> Content 2 </div> </div> </td> <td> <div class="ParentPos"> <div class="ChildPos"> Content 3 </div> </div> </td> <td>Content 4</td> <td>Content 5</td> <td>Content 6</td> <td>Content 7</td> </tr> <tr> <td> <div class="ParentPos"> <div class="ChildPos"> Content 1 </div> </div> </td> <td> <div class="ParentPos"> <div class="ChildPos"> Content 2 </div> </div> </td> <td> <div class="ParentPos"> <div class="ChildPos"> Content 3 </div> </div> </td> <td>Content 4</td> <td>Content 5</td> <td>Content 6</td> <td>Content 7</td> </tr> </table> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用固定标题使引导表可以垂直和水平滚动 - Make the bootstrap table scroll-able vertically and horizontally with fixed header
如何获取可滚动表格中所有元素的列表 - How to get a list of all elements in a scroll-able table
固定表格标题不与列对齐 - Fixed table headings not aligning with columns
如何固定表格的第一列并在其余列中滚动 - How can I make the first column of a table fixed and have a scroll in rest columns
如何制作固定列的表格？ - How to make a table with fixed columns?
如何使div中的ul标签可滚动 - How to make a ul tag inside div scroll-able
如何在可滚动表中保留动态添加的行 - How to keep dynamically added row in a scroll-able table
带固定列的HTML表格 - Html table with fixed columns
Bootstrap中的水平和垂直滚动表 - Horizontal and vertical Scroll-able table in Bootstrap
如何在标题固定的情况下水平和垂直滚动表中的列 - How to move columns in a table with horizontal and vertical scroll with the header fixed
相关标签