如何模仿水平滚动的固定位置，但保持正常的垂直滚动？ （表的粘性列）
让我开始说我无法相信我为此遇到了多少麻烦。我已经尝试过一切都没有运气。不幸的是，我有很多需要满足的要求，不能做出很多让步。
基本上，我需要创建一个可排序的表，其第一列充当“粘性”列。所有其他列都可以水平滚动并“进入”第一列。
现在，这很简单了。但是，第一列固定位置的问题在于它不遵守它所在的1200x600px容器的边界。但更重要的是，应用固定位置会使第一列难以与其他列一起滚动文字。
一个例子：
现在，正如您可能想像的那样，滚动时会显示以下内容：
从本质上讲，这首先使实现粘性柱的全部目的无效。
我想做的就是完全拥有现在的样子，而且还可以将滚动条“绑定”到固定列上，以便它与表格的其余部分一起滚动。
但是，需要考虑以下几点：
- 表格的标题需要保留在原处（即不能仅将所有内容放入另一个div中并对其进行滚动。无论如何都不能确定固定位置）。
- 一切都必须是可排序的，因此通过拿两张桌子并将它们塞在一起（正如我在其他答案中看到的那样），我们变得更加复杂，并且要求左派和右派的未来努力保持某种相似的联想。
我什至无法告诉您，在这里我有多满意。我已经为此工作了一个星期。我已经在阳光下尝试了每个JS库，但是它们的问题在于，大多数这些库遵循创建多个表并在页面上隐藏一些表的约定。滚动时（特别是大量数据），这会带来很多延迟。如果我们能以某种方式找到一种可以减少黑客的方法做到这一点，那将是理想的选择，尽管在这一点上我将尽一切努力。
好消息是，我们始终可以为每个表格单元依靠固定的高度和固定的高度。
谢谢！
2 个答案:
答案 0 :(得分：1)
Hi I add another for fixed heading and you try for sorting using jquery
function
<!DOCTYPE HTML>
<html>
<head>
<style>
.table-scroll {
position: relative;
max-width: 600px;
margin: auto;
overflow: hidden;
border: 1px solid #000;
height:150px;
}
.table-wrap {
width: 100%;
overflow: auto;
height:150px;
}
.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th, .table-scroll td {
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
white-space: nowrap;
vertical-align: top;
}
.table-scroll thead, .table-scroll tfoot {
background: #f9f9f9;
}
.clone {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
height:100px;
}
.clone th, .clone td {
visibility: hidden
}
.clone td, .clone th {
border-color: transparent
}
.clone tbody th {
visibility: visible;
color: red;
}
.clone .fixed-side {
border: 1px solid #000;
background: #eee;
visibility: visible;
}
.clone thead, .clone tfoot {
background: transparent;
}
</style>
</head >
<body>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th class="fixed-side" scope="col">Header 2</th>
<th class="fixed-side" scope="col">Header 3</th>
<th class="fixed-side" scope="col">Header 4</th>
<th class="fixed-side" scope="col">Header 5</th>
<th class="fixed-side" scope="col">Header 6</th>
<th class="fixed-side" scope="col">Header 7</th>
<th class="fixed-side" scope="col">Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Left Column</th>
<td>
Cell content<br>
test
</td>
<td><a href="#">Cell content longer</a></td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="fixed-side"> </th>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
<td>Footer 6</td>
<td>Footer 7</td>
<td>Footer 8</td>
</tr>
</tfoot>
</table>
</div>
</div>
<p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
</script>
</body>
</html >
答案 1 :(得分：0)
hi ActiveModel第一个表列在下面的页面中发粘
<!DOCTYPE HTML>
<html>
<head>
<style>
.table-scroll {
position: relative;
max-width: 600px;
margin: auto;
overflow: hidden;
border: 1px solid #000;
}
.table-wrap {
width: 100%;
overflow: auto;
}
.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th, .table-scroll td {
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
white-space: nowrap;
vertical-align: top;
}
.table-scroll thead, .table-scroll tfoot {
background: #f9f9f9;
}
.clone {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.clone th, .clone td {
visibility: hidden
}
.clone td, .clone th {
border-color: transparent
}
.clone tbody th {
visibility: visible;
color: red;
}
.clone .fixed-side {
border: 1px solid #000;
background: #eee;
visibility: visible;
}
.clone thead, .clone tfoot {
background: transparent;
}
</style>
</head >
<body>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
<th scope="col">Header 6</th>
<th scope="col">Header 7</th>
<th scope="col">Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Left Column</th>
<td>
Cell content<br>
test
</td>
<td><a href="#">Cell content longer</a></td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="fixed-side"> </th>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
<td>Footer 6</td>
<td>Footer 7</td>
<td>Footer 8</td>
</tr>
</tfoot>
</table>
</div>
</div>
<p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
</script>
</body>
</html >
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？