How to Add Scrollbars to an HTML5 Table?

How to Add Scrollability to HTML5 Tables

To add a scrollbar to a table with only a limited number of displayed rows, follow these steps:

1. Define the Table Structure:

Create a basic HTML5 table with the necessary columns and rows. For instance:

2. Set the Table CSS:

To style the table, use CSS to specify its dimensions, colors, and alignment. For example:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

3. Create a Scrollbar:

To add the scrollbar, focus on the tbody of the table. This section should be configured as follows:

tbody {
    overflow: auto;
    height: 150px;
}

• overflow: auto enables scrolling when the table content exceeds its height.
• height: 150px sets the visible height of the table to 150 pixels, ensuring that only a few rows are displayed at a time.

4. Maintain Column Alignment:

If your table has a header row, you'll need to ensure that it remains aligned with the main body as you scroll. This can be achieved by wrapping both elements in a tableSection class and applying the following CSS:

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}

5. Adjust Column Widths (Optional):

To ensure that all table columns have the same width, regardless of their content, you can include the following CSS:

table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

6. Remove Scrollbars from Header (Optional):

If you don't want the header to be scrollable, add the following CSS rule:

table.tableSection thead {
    overflow: hidden;
}

7. Handle Presence of Scrollbar (Optional):

To dynamically adjust your CSS based on the presence of a scrollbar, consider using JavaScript to detect its existence and apply the necessary styles.

The above is the detailed content of How to Add Scrollbars to an HTML5 Table?. For more information, please follow other related articles on the PHP Chinese website!