修复水平滚动中的列答案

【问题标题】：Fix columns in horizontal scrolling修复水平滚动中的列
【发布时间】：2013-09-20 12:42:40
【问题描述】：

当用户在 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 轴上滚动。我得到的问题是：

如何修复tbody 中th 标记的位置（以及thead 中的th:first-child）？

我一直在查看其他一些线程，但是它们并没有真正解释我是如何实现固定列的，这让我很难理解代码的作用以及我应该做什么。

我还检查了人们在另一个表中拆分标题列的解决方案。这对我来说是不可能的，因为我稍后会将数据导出到其他系统。

我的 CSS：

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
}

这修复了滚动，现在可以使用：

tbody th, 
thead th:first-child {}

有人有什么想法吗？

编辑：这是一个 jsFiddle：https://jsfiddle.net/DJqPf/5/

【问题讨论】：

标签： html css

【解决方案1】：

已解决

https://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
}

更新

$(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>

【讨论】：

我看到 jsFiddle 做了我想要的，但你能解释一下发生了什么吗？
this的定位也有问题。当我对我的代码实施此解决方案时，th 彼此堆叠并固定在我的容器之外
我无法判断我看不到的代码有什么问题。也许为您的 th:first-child 规则添加宽度可以解决您的问题，但我只是在猜测。
没有帮助。尽管我搞乱了定位：制作了另一个包装器并给它一个相对定位，然后添加了 position: absolute;给第一个孩子。似乎工作:)
@rafaelcastrocouto 你在这里对高度进行编码，这是无法解决的。我找到了一个解决这个问题的有效解决方案，它涉及最少的 JavaScript 。我会尽快发布。

【解决方案2】：

使用 JavaScript + jQuery 解决！我只需要与我的项目类似的解决方案，但当前使用 HTML 和 CSS 的解决方案对我来说并不合适，因为列高存在问题 + 我需要修复多于一列。所以我使用 jQuery 创建了简单的 javascript 解决方案

你可以在这里试试 https://jsfiddle.net/kindrosker/ffwqvntj/

您所需要的只是设置主页，许多列将被固定在数据计数固定列参数

<table class="table" data-count-fixed-columns="2" cellpadding="0" cellspacing="0">

并运行js函数

app_handle_listing_horisontal_scroll($('#table-listing'))

【讨论】：

好吧，我想如果你有机会等待 jQuery.ready() 你也可以这样做。然而，也应该有办法用 CSS 做到这一点。谢谢您的意见！
@Jari Thorup Palo，是的，你是对的，长桌我们必须等待文件准备好 $(function(){ ... })。关于 CSS，之前的解决方案适用于具有固定宽度/高度单元格的表格。
有没有办法修复表头？

【解决方案3】：

演示：http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/

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>

    $(document).ready(function() {
        $("#fixTable").tableHeadFixer({"head" : false, "right" : 1}); 
    });

CSS

    #parent {
        height: 300px;
    }

    #fixTable {
        width: 1800px !important;
    }

https://jsfiddle.net/5gfuqqc4/

【讨论】：

只要您的表中没有大量数据，为此使用 javascript 是一个可行的解决方案。如果您的表格太大，请改用 CSS，因为它的性能要好得多。三年前我写这个问题时，我的数据表至少在一年内每秒钟有一行输入，并且旨在用于比较至少 10 列。想象一下用 jQuery 迭代它。 :) 感谢您的意见！