当用户在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轴中的滚动。我的问题是：
我如何修正t标签内的位置(和第一个孩子在theader中)？
我一直在看一些其他的线程，但是他们并没有真正解释我如何实现固定的列，这使得我难以理解代码的作用和我应该做什么。
我还检查了解决方案，人们将另一个表中的标题列分开。这对我来说是不可能的，因为我以后会将数据导出到其他系统。
我的css：
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
}
这修复了滚动，现在来处理：
tbody th,thead th:first-child {}
任何人有任何想法？
编辑：这是一个jsFiddle：http://jsfiddle.net/DJqPf/5/
解决方法
解决了
.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
}
UPDATE
$(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>
