Menu
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/
905
To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.
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>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
You can try it here https://jsfiddle.net/kindrosker/ffwqvntj/
All you need is setup home many columsn will be fixed in data-count-fixed-columns parameter
<table class="table" data-count-fixed-columns="2" cellpadding="0" cellspacing="0"> and run js function
app_handle_listing_horisontal_scroll($('#table-listing')) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
