html - Fix columns in horizontal scrolling

Question

Welcome To Ask or Share your Answers For Others

html - Fix columns in horizontal scrolling

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Fix columns in horizontal scrolling

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:

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

How do I fix the position of the th tags inside the tbody (and the th:first-child in the 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:

.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: https://jsfiddle.net/DJqPf/5/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:20:50+0000

SOLVED

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
}

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>

Categories

html - Fix columns in horizontal scrolling

html - Fix columns in horizontal scrolling

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags