html – 在水平滚动中修复列
发布时间:2020-12-14 22:24:22 所属栏目:资源 来源:网络整理
导读:当用户在X轴中滚动时,我正在尝试将第一列修复到表中。 我使用这个结构: div class="table-wrapper" table id="consumption-data" class="data" thead class="header" tr thMonth/th thItem 1/th /tr /thead tbody class="results" tr thJan/th td3163/td /
当用户在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/ 解决方法
解决了
http://jsfiddle.net/DJqPf/7/ .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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |