在水平滚动中修正列 [英] Fix columns in horizontal scrolling
问题描述
当用户在X轴中滚动时，我目前正在尝试修复表格中的第一列。
我使用这种结构：
< div class =table-wrapper>
< table id =consumption-dataclass =data>
< thead class =header>
< tr>
< th> Month< / th>
< th>项目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>五月< / 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-tags在tbody（和th：first-child在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：滚动;
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'）。 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>一些随机文字< / h1>< / div>< div class =table-wrapper> < table id =consumption-dataclass =data> < thead class =header> < tr> < th> Month< / th> < th>项目1< / th> < th>项目2< / th> < th>项目3< / th> < th>项目4< / th> < / tr> < / thead> < tbody class =results> < tr> < th> Jan是一个非常棒的月份< / 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>五月< / 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>I am currently trying to fix my first column in a table when the user scroll in the X-axle. I am using this structure:
<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>The number of items will be picked by the user, i.e. it could be 90 items in the table. This will require a scroll in the X-axle. The question i have got though is:
How do i fix the position of the th-tags inside the tbody (and the th:first-child in the theader)?
I have been looking at some other threads, however they do not really explain how i achieve the fixed columns which makes it hard for me to understand what the codes does and what i am supposed to do.
I have also checked on solutions where people split up the header-column in another table. This wont be possible for me because i will export the data to other systems later on.
My css:
.table-wrapper { overflow-x:scroll; overflow-y:visible; }This fixes the scroll, now comes the work with:
tbody th, thead th:first-child {}Anyone got any ideas?
EDIT: Here is a jsFiddle: http://jsfiddle.net/DJqPf/5/
解决方案SOLVED
.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>
这篇关于在水平滚动中修正列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
