在水平滚动中修复列

Question

在水平滚动中修复列

当用户在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>

Run Code Online (Sandbox Code Playgroud)

用户将选择项目数,即表中可能有90个项目.这将需要在X轴上滚动.我遇到的问题是:

如何修复的位置th标签内tbody(中和th:first-child的thead)？

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

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

我的css:

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

Run Code Online (Sandbox Code Playgroud)

这修复了滚动,现在可以使用:

tbody th, 
thead th:first-child {}

Run Code Online (Sandbox Code Playgroud)

有人有任何想法吗？

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

Answer 1

raf*_*uto 44

解决了

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
}

Run Code Online (Sandbox Code Playgroud)

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'});
  });
});

Run Code Online (Sandbox Code Playgroud)

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
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

@rafaelcastrocouto你在这里解决了无法解决的问题.我找到了一个解决这个问题的工作方案,它涉及最小的JavaScript.我很快就会发布. (2认同)

Answer 2

Ser*_*hin 5

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

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

您所需要的只是设置主页，将在 data-count-fixed-columns 参数中修复许多列

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

Run Code Online (Sandbox Code Playgroud)

并运行js函数

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，1 月前
查看次数：	88658 次
最近记录：	8 年，3 月前