我们如何使前三列的 html 表格标题固定，而其他所有列都可以滚动
这个问题让我觉得它是重复的，但是在经历了多个相关线程之后我意识到......我已经经历了关于我的要求的大多数相关线程（固定列），并且在遵循答案之后我面临着一些文本重叠的问题如下......
我正在尝试实现一些目标，例如使前三列的表格标题 html 固定，并且所有其他列都可以滚动。
https://i.stack.imgur.com/pB8E0.png
所以，最后 - 我想实现这样的目标：
https://i.stack.imgur.com/f70z1.png
我可以尝试哪些事情？
慕容708150浏览 99回答 1
1回答
-
饮歌长啸
您可以调整标准HTML Table以满足您的需求。现在，下面是这种包装如何工作的演示......<!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>
随时随地看视频慕课网APP
相关分类
Html5
