CSS table scrolling

In web development, you often encounter tables that need to display long content, but the page space is limited and it is impossible to display all the content at once. This is where CSS table scrolling comes in handy. This article will detail how to achieve table scrolling with CSS.

1. Basic Structure

First, we’ll create a basic HTML structure consisting of a long table wrapped in a fixed-height container. This way, when the table content exceeds the container’s height, a scroll bar will appear.

<div class="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>City</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zhang San</td>
<td>25</td>
<td>Male</td>
<td>Beijing</td>
<td>zhangsan@example.com</td>
</tr>
<!-- Other lines omitted -->
</tbody>
</table>
</div>

Next, we’ll use CSS styles to implement the scrolling effect of the table.

2. CSS Style

First, we set a fixed height for the .table-container container and set its overflow property to auto. This will cause a vertical scrollbar to appear when the table content exceeds the container’s height.

.table-container {
height: 300px; /* Sets the container height */
overflow: auto; /* Sets the scrollbar to appear for overflowing content */
}

Next, we need to set the table’s table-layout property to fixed. This ensures that the table columns remain fixed widths and don’t automatically adjust to the content.

table {
width: 100%; /* Set table width */ 
table-layout: fixed; /* Fixed table layout */ 
}

Next, we set display: block for the table’s thead and tbody sections. This will make the table header and content appear as block-level elements, making them easier to scroll.

thead, tbody {
display: block; /* Set as block-level elements */ 
}

Finally, we can achieve the effect of fixing the table header to the top by setting the position: sticky and z-index properties for the thead section.

thead {
position: sticky; /* Set to sticky positioning */ 
top: 0; /* 0 pixels from the top */ 
z-index: 1; /* Set the stacking order to 1 */ 
}

3. Complete Code Example

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS table scrolling</title> 
<style> 
.table-container { 
height: 300px; 
overflow: auto; 
} 

table { 
width: 100%; 
table-layout: fixed; 
} 

thead, tbody { 
display: block; 
} 

thead { 
position: sticky; 
top: 0; 
z-index: 1; 
background-color: #f0f0f0; 
} 
</style> 
</head> 
<body> 
<div class="table-container"> 
<table> 
<thead> 
<tr> 
<th>Name</th> 
<th>Age</th> 
<th>Gender</th> 
<th>City</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Zhangsan</td> 
<td>25</td> 
<td>Male</td> 
<td>Beijing</td> 
<td>zhangsan@example.com</td> 
</tr> 
<!-- Other lines omitted -->
</tbody>
</table>
</div>

</body>
</html>

This demonstrates how to implement table scrolling using CSS. By setting the container’s height and overflow properties, as well as adjusting the table layout and fixed header, you can display longer table content as scrollbars, improving the user experience.