How to Make an HTML Table Scrollbar Appear?

How to display scroll bar onto a html table

When it comes to creating a table in HTML, it's common to encounter situations where you want to maintain a consistent table size while ensuring that its content remains accessible even when the number of rows grows beyond the visible area. To achieve this, you may encounter scenarios where you need to display a scrollbar within the table itself.

In this case, you may have attempted to use CSS styles like:

tbody {
  height: 80em;
  overflow: scroll;
}

and incorporated them into your HTML structure:

However, you may have noticed that despite implementing these styles, a scrollbar fails to appear. This issue stems from the fact that the parent element of the

tag, which is the element, lacks the necessary CSS properties to accommodate scrolling.

To resolve this, you need to modify your CSS rules to apply them both to the

and elements:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table * {
  background: yellow;
  color: black;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

Additionally, you need to wrap the

element within a

element with the ID "table-wrapper":

<div><p>By implementing these changes, you can successfully display a scrollbar within your HTML table, allowing users to navigate its contents seamlessly.</p></div>

The above is the detailed content of How to Make an HTML Table Scrollbar Appear?. For more information, please follow other related articles on the PHP Chinese website!