Horizontal scrolling table: multiple fixed columns
I tried to make a horizontal scroll table and I was able to make it, but only the first column is fixed. I need the scroll table for two or more columns to be fixed.
Here is the script link here
I want this table to scroll for two or more two columns in order to freeze and scroll the rest. Is it possible to create a CSS class (example "fixedColumn") so that any column that has this CSS class is fixed and the rest of the columns scroll? I cannot 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;
}
source to share
as long as your table is fixed width, you can do something like this:
td:nth-child(3) {
position: fixed;
left: 160px;
width:100px;
}
of course you will need to adjust the properties left
and width
, and nth-child according to the column you want to keep in a fixed position, but you get the idea. That being said, I would try using divs instead of tables, it is much more manageable for cases like this
source to share