这个问题让我觉得它是重复的，但是在经历了多个相关线程之后我意识到......我已经经历了关于我的要求的大多数相关线程（固定列），并且在遵循答案之后我面临着一些文本重叠的问题如下......我正在尝试实现一些目标，例如使前三列的表格标题 html 固定，并且所有其他列都可以滚动。https://i.stack.imgur.com/pB8E0.png 所以，最后 - 我想实现这样的目标：https://i.stack.imgur.com/f70z1.png 我可以尝试哪些事情？
1 回答
饮歌长啸
TA贡献1951条经验 获得超3个赞
您可以调整标准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>
- 1 回答
- 0 关注
- 98 浏览
添加回答
举报
0/150
提交
取消