How to Make an HTML Table Scrollbar Appear?-CSS Tutorial-php.cn

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;
}

Copy after login

and incorporated them into your HTML structure:

<table border=1>

Copy after login

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;
}

Copy after login

Additionally, you need to wrap the

element within a <div> element with the ID "table-wrapper":

<div>

Copy after login

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

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!

source：php.cn

Previous article：How Can I Implement Overflow Scrolling in a Table Body While Maintaining Table Structure? Next article：How Can I Preload CSS Background Images for Faster Website Loading?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn