这个问题让我觉得它是重复的，但是在经历了多个相关的线程之后我意识到......我已经根据我的要求经历了大多数相关的线程( fixed columns )，并且在遵循了我的答案之后面临一些文本重叠问题，如下所示......
我正在尝试实现类似使前三列的标题为固定的 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> 
所以，最后 - 我想实现这样的目标:
我可以尝试哪些事情？
最佳答案
您可以调整标准 HTML Table 以满足您的需求。
通过表格，机制在 this 中得到了很好的布局。由 avernet 回答，因此请阅读该内容以了解您在直接操作表格时会遇到的问题。
您可以使用包装器和nth-child 类选择器可以找到这些的集合 here .
现在，下面是有关这种包装如何工作的演示...
<!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>关于javascript - 我们如何使前三列的 html 表格标题固定，而其他所有列都可以滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60992628/