CSS fixed table first column

CSS Fixed Table First Column

In web development, tables are one of the most commonly used elements for displaying and comparing data. However, when a table has a large number of rows, column headers can disappear from the visible area when the user scrolls to the bottom, making it difficult to view the data properly. To solve this problem, we can use CSS to fix the first column of the table, ensuring that the user can still see the key column information even when scrolling.

How it works

To fix the first column of a table, we need to split the table into two parts: fixed columns and scrollable content. The fixed columns contain the first column of the table, which is used to display column names or other important information; the scrollable content contains the rest of the table, which the user can view by scrolling.

HTML Structure

First, we need to prepare a div container to contain the table and write the table’s HTML structure into it. Here’s a simple example:

<div class="table-container"> 
<table> 
<thead> 
<tr> 
<th>Name</th> 
<th>Age</th> 
<th>City</th> 
<th>Gender</th> 
<th>Occupation</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Zhang San</td> 
<td>25</td> 
<td>Beijing</td> 
<td>Male</td> 
<td>Engineer</td> 
</tr> 
<!-- more rows... --> 
</tbody> 
</table>
</div>

CSS Styles

Next, we’ll use CSS to fix the first column of the table. First, we need to style the table container and split the table into a fixed column and scrollable content. The specific code is as follows:

.table-container {
overflow: auto;
height: 300px; /* Set table height */
}

table {
width: 100%; /* Set table width */
border-collapse: collapse;
}

td, th {
border: 1px solid #ddd; /* Set cell border style */
padding: 8px; /* Set cell padding */
}

thead th {
background-color: #f2f2f2; /* Set table header background color */
}

.fixed-column {
position: absolute;
top: 0;
left: 0;
background-color: #fff; /* Set fixed column background color */ 
}

In the code above, we set the style of the table container to enable scrollbar functionality. We then added the fixed-column class to the fixed column to facilitate subsequent styling changes. Next, we need to use JavaScript to fix the first column of the table.

JavaScript Script

We use JavaScript to fix the first column of the table to the left. The specific implementation is as follows:

document.addEventListener("DOMContentLoaded", function() {
const tableContainer = document.querySelector(".table-container");
const table = tableContainer.querySelector("table");
const firstColumn = table.querySelectorAll("tr td:first-child");

const fixedColumn = document.createElement("div");
fixedColumn.classList.add("fixed-column");

firstColumn.forEach((item, index) => {
const clone = item.cloneNode(true);
fixedColumn.appendChild(clone);
});

tableContainer.appendChild(fixedColumn);
});

In the JavaScript code above, we first obtain the div container and the table element that contains the table. Next, we retrieve all cells in the first column of the table and copy them one by one into a newly created div element. Finally, we add this newly created div element to the table’s container, creating the fixed column effect.

Running Results

When we combine the above HTML, CSS, and JavaScript code and run it in a browser, we see a table with a fixed first column. Users can scroll to view the table’s contents, while the first column remains visible, making it easy to view relevant information.

Using this method, we can easily achieve the effect of fixing the first column of a table, improving the user experience when browsing table data.