Keep the first column of an HTML table fixed as you scroll horizontally

Question

Keep the first column of an HTML table fixed as you scroll horizontally

Below is an HTML table that I have created:

<table id="customers" class="table table-bordered" width="100%">
<thead>
<tr>
<th colspan="2">Activities</th>
<th>Mon 17</th>
<th>Tue 18</th>
</thead> 
<tr>
<td colspan="2" rowspan="2">Session 1</td>
<td></td>
<td></td>
</tr>
<tr> 
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Session 2</td>
<td>Session 2.1</td>
<td></td>
</tr>
<tr>
<td>Session 2.2</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="1">Session 3</td>
<td></td>
<td></td>
</tr>
</table>

I want the entire first column ('Activities') to remain fixed while scrolling horizontally.

I attempted to achieve this through CSS but it didn't work as expected, especially if I add more columns to the right since the dates will also move.

.tableFixHead { overflow-x: auto; width: 150px; }

javascript html css

Answer 1

Answer №1

I was able to achieve a "sticky column" feature by making some adjustments. I utilized the position: sticky property on the table cells that I wanted to remain in place:

#clients td:nth-child(2),
#clients th:nth-child(2) {
  position: sticky;
  left: 0;
}

With this setup, content can now scroll horizontally underneath the second column.

Answer 2

I was able to achieve a "sticky column" feature by making some adjustments. I utilized the position: sticky property on the table cells that I wanted to remain in place:

#clients td:nth-child(2),
#clients th:nth-child(2) {
  position: sticky;
  left: 0;
}

With this setup, content can now scroll horizontally underneath the second column.

Answer 3

Answer №2

To keep a row fixed to the screen, make use of position: fixed. Implementing this in your code requires only a small amount of CSS:

thead tr {
  position: fixed;
}

Adjustments may be necessary depending on other elements present on the page.

For a more detailed example, check out this CodePen: https://codepen.io/yvesgurcan/pen/oNjjrdN

Answer 4

To keep a row fixed to the screen, make use of position: fixed. Implementing this in your code requires only a small amount of CSS:

thead tr {
  position: fixed;
}

Adjustments may be necessary depending on other elements present on the page.

For a more detailed example, check out this CodePen: https://codepen.io/yvesgurcan/pen/oNjjrdN

Keep the first column of an HTML table fixed as you scroll horizontally

Answer №1

Answer №2

Similar questions

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Sophisticated method in JavaScript to conceal and reveal div elements

The divs contained are misaligned and not properly centered on the page

Is there a way to align both JSX elements in a single row without having one overlap the other?

Ways to share code across AngularJS frontend and Node.js backend

Eliminate the lower boundary of a divisional table

Use the $.get() method in JavaScript to send a parameter to my controller function

Using cURL instead of AJAX for PHP requests

Creating HTML forms allows for images to be used as checkboxes

Preloaded background images are loaded twice

The property 'createUploadWidget' cannot be read from an undefined source

Eliminate the outline of the pager row in an asp.net grid view

Unable to fetch information from Grid to a new window with Form in Extjs 4

Understanding how to use the 'this' variable in Vue components is essential for efficiently modifying DOM elements. Let's dive into a clarification on the usage of 'this'

Having trouble getting the CSS class to work in MVC4 with jQuery implementation

Can CSS be used to create drop down menus?

Using regular expressions in Javascript to extract decimal numbers from a string for mathematical operations

Navigating through a custom drop-down using Selenium WebDriver: Identifying elements within DIV, UL, and LI

Contrasting an array of items with an array of Objects

AngularJS Banner: Displaying Current Calendar Week and Increasing by 10 Days