Html 修复水平滚动中的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18826775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix columns in horizontal scrolling
提问by Jari Thorup Palo
I am currently trying to fix my first column in a table when the user scrolls in the X-axis. I am using this structure:
当用户在 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>
The number of items will be picked by the user, i.e. it could be 90 items in the table. This will require scrolling in the X-axis. The question I have got though is:
项目的数量将由用户选择，即表中可能有 90 个项目。这将需要在 X 轴上滚动。我的问题是：
How do I fix the position of the thtags inside the tbody(and the th:first-childin the thead)?
如何修复的位置th标签内tbody（中和th:first-child的thead）？
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:
我的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/
编辑：这是一个 jsFiddle：http: //jsfiddle.net/DJqPf/5/
回答by rafaelcastrocouto
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>回答by Sergey Kharchishin
Solved using JavaScript + jQuery! I just need similar solution to my project but current solution with HTML and CSS is not ok for me because there is issue with column height + I need more then one column to be fixed. So I create simple javascript solution using jQuery
使用 JavaScript + jQuery 解决！我只需要与我的项目类似的解决方案，但当前的 HTML 和 CSS 解决方案对我来说并不合适，因为列高存在问题 + 我需要修复不止一列。所以我使用 jQuery 创建了简单的 javascript 解决方案
You can try it here https://jsfiddle.net/kindrosker/ffwqvntj/
你可以在这里试试 https://jsfiddle.net/kindrosker/ffwqvntj/
All you need is setup home many columsn will be fixed in data-count-fixed-columns parameter
您所需要的只是设置主页，将在 data-count-fixed-columns 参数中修复许多列
<table class="table" data-count-fixed-columns="2" cellpadding="0" cellspacing="0">
and run js function
并运行js函数
app_handle_listing_horisontal_scroll($('#table-listing'))
回答by Adrian P.
Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/
演示：http: //www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/
HTML
HTML
<h2>TableHeadFixer Fix Left Column</h2>
<div id="parent">
<table id="fixTable" class="table">
<thead>
<tr>
<th>Ano</th>
<th>Jan</th>
<th>Fev</th>
<th>Mar</th>
<th>Abr</th>
<th>Maio</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
</tbody>
</table>
</div>
JS
JS
$(document).ready(function() {
$("#fixTable").tableHeadFixer({"head" : false, "right" : 1});
});
CSS
CSS
#parent {
height: 300px;
}
#fixTable {
width: 1800px !important;
}
