固定水平滚动中的列
我目前正在尝试在用户在X轴上滚动时修复表格中的第一列。我正在使用此结构：
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan</th>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163.7</td>
</tr>
<tr>
<th>Mar</th>
<td>3163.7</td>
</tr>
<tr>
<th>Apr</th>
<td>3163.7</td>
</tr>
<tr>
<th>May</th>
<td>3163.7</td>
</tr>
<tr>
<th>Jun</th>
<td>3163.7</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
</div>
用户将选择项目的数量，即表中可能是90个项目。这将需要在X轴上滚动。我得到的问题是：
如何确定（和中的）th标记的位置？tbody``th:first-child``thead
我一直在看其他一些线程，但是它们并没有真正解释我如何实现固定列，这使我很难理解代码的作用和应做的事情。
我还检查了人们将标题栏拆分到另一个表中的解决方案。这对我来说是不可能的，因为稍后我会将数据导出到其他系统。
我的CSS：
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
}
这可以修复滚动，现在可以使用：
tbody th,
thead th:first-child {}
任何人有任何想法吗？
问题答案：
解决了
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:250px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
left: 5px
}
更新
$(function () {
$('.table-wrapper tr').each(function () {
var tr = $(this),
h = 0;
tr.children().each(function () {
var td = $(this),
tdh = td.height();
if (tdh > h) h = tdh;
});
tr.css({height: h + 'px'});
});
});
body {
position: relative;
}
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:200px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
tbody tr {
}
th:first-child {
position: absolute;
left: 5px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>SOME RANDOM TEXT</h1>
</div>
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan is an awesome month</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Mar</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Apr</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>May</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Jun</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</body>
</html>
-
问题内容： 我一直在尝试一种方法来制作具有固定的第一列的表（表的其余部分具有水平的溢出），我看到有类似问题的帖子。但是固定的列位似乎没有解决。帮帮我？ 问题答案： 我有一个类似的样式，如下所示：
-
我一直在努力解决HTML/CSS粘滞头+滚动条的问题。我们正在创建一个程序，一旦containersize达到某个点（取决于用户的分辨率），就需要滚动条显示出来。 我在表中的第二列上强制设置一个min-width,因此表在某个点停止递减,并强制容器保持在某个宽度。容器上的溢出显示水平滚动条。一切正常。一旦我为垂直滚动添加了第二个滚动条，事情就会变得一团糟。有人有解决这个问题的办法吗？我想在.tab
-
我想创建一系列可以垂直滚动的表，每个表的行/列数可能不同。 在每个表中，我希望将最左边的列冻结在适当的位置，并且该表中的其余列可以水平滚动，以防有许多列不适合屏幕的宽度。见截图： 我最初的计划是使用ListView在表之间进行页面级别的垂直滚动，在每个表中有一行列，其中第一列是静态宽度，其余的列包含在水平滚动的ListView中。我从Flutter得到的错误并不能帮助我确定我需要做什么，但它显然与
-
问题内容： 我正在尝试创建一系列只能水平滚动的照片。 它应该看起来像这样的 但是，只有通过指定包含照片的的宽度，才能实现上述目的（因此它们不会“自动换行”）。如果我不放宽- 看起来像这样； 使用CSS可以防止固定宽度的图像发生变化，该怎么办。 谢谢 问题答案： 您可以使用与。这样写：
-
问题内容： 我知道这个问题存在一百万次，但是我找不到解决方案。我有一个div，它应该固定在屏幕上，即使滚动页面，它也应该始终保持在屏幕中间！ 对于所有浏览器尺寸，div应该具有宽度，应该远离顶部（页边距），应该在页面中间水平居中，并且在滚动其余页面时不应移动。 那可能吗？ 问题答案：
-
我有一个水平ScrollView，它有两个元素：CardView和水平RecycerView。所以，当用户水平滚动时，我希望这两个元素滚动。 我想有这样的东西:Goal，橙色的线是CardView，黄色的线是RecycerView。当用户滚动时，两个元素滚动，如下所示：Scrolled Goal。 现在在我的应用程序中，当用户滚动时，只有RecycerView滚动。CardView保持在他的位置。