我使用这个结构：
<div > <table ID="consumption-data" > <thead > <tr> <th>Month</th> <th>Item 1</th> </tr> </thead> <tbody > <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 > <table ID="consumption-data" > <thead > <tr> <th>Month</th> <th>Item 1</th> <th>Item 2</th> <th>Item 3</th> <th>Item 4</th> </tr> </thead> <tbody > <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 – 在水平滚动中修复列全部内容，希望文章能够帮你解决html – 在水平滚动中修复列所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）