固定水平滚动中的列

小编典典

固定水平滚动中的列

css

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

如何确定（和中的）th标记的位置？tbody``th:first-child``thead

我一直在看其他一些线程，但是它们并没有真正解释我如何实现固定列，这使我很难理解代码的作用和应做的事情。

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

我的CSS：

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

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

tbody th, 
thead th:first-child {}

任何人有任何想法吗？

阅读 347

2020-05-16

共1个答案

小编典典

解决了

.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>

2020-05-16