4

I was trying to make a horizontally scrolling table and I was able to make it but only the first column is fixed. I need to make the scrolling table for two or more column to be fixed.

Here is the link of the fiddle here

I want to make this table scrolling for two or more than 2 columns be fixed and rest scrolling. Is it possible to make a CSS class (example "fixedColumn") so that any column having this CSS class is fixed and rest of the columns are scrolling? I can not use any JavaScript plugins (no JS at all).

Please help.

HTML

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

CSS

.table-wrapper { overflow-x:scroll; overflow-y:visible; width:250px; margin-left: 120px;

}

td, th { padding: 5px 20px; width: 100px; } th:first-child { position: absolute; left: 5px; }
Improve this question

1 Answer 1

Reset to default
1

as long as your table has a fixed width, you can do something like this:

td:nth-child(3) { position: fixed; left: 160px; width:100px; }

of course you'll need to adjust both left and width properties, and the nth-child according to the column you want to keep in a fixed position, but you'll get the idea. This being said, I'd try using divs instead of tables, it's far more manageable for instances like this

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I am trying to use a simple CSS class name to fixed any columns and not using the nth-child selector. Is it possible ?
yes, and it's even better, just give a class to the TD element (and also the TH as we're at it) and get rid of the nth-child.
I tried it all but it's not working :-( ... can you please try in that fiddle?
Hi Fabio, its looks working but I have two issues. First, if I have long string, it overlaps the other column data and second is the fixed column does not hide the scrolling column data. Can you please check this updated fiddle? jsfiddle.net/jeewanaryal/zxde4a4f/1
well, of course you'll need to adjust it, I'm telling you an option based on your code, personally I wouldn't even use a table and I don't know why you need the fixed column behavior, so I did it based on your description and your existing code. For the "hide", simply add this: background:#ccc; z-index:100;

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.