Creating a scrollable HTML table

Question

Creating a scrollable HTML table

I'm having trouble getting my table to scroll vertically. Can someone provide assistance? Here is the HTML code I am using:

<div class = scroll>
            <table border="1">
             <tbody>
                <tr>
                    <th>Number</th>
                    <th>Name</th>

                </tr>
                <tr>
                    <td>
                    5
                      </td>
                    <td>
                    Hello
                     </td>
                </tbody>
            </table>
            </div>

Additionally, here is my CSS code:

.scroll{
    overflow:scroll;

}

java html css

Answer 1

Answer №1

Adjust the height property within your CSS stylesheet

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 120px;
  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;
}

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
      <thead>
        <tr>
          <th><span class="text">A</span></th>
          <th><span class="text">B</span></th>
          <th><span class="text">C</span></th>
        </tr>
      </thead>
      <tbody>
        <!-- More table rows here -->
      </tbody>
    </table>
  </div>
</div>

Answer 2

Adjust the height property within your CSS stylesheet

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 120px;
  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;
}

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
      <thead>
        <tr>
          <th><span class="text">A</span></th>
          <th><span class="text">B</span></th>
          <th><span class="text">C</span></th>
        </tr>
      </thead>
      <tbody>
        <!-- More table rows here -->
      </tbody>
    </table>
  </div>
</div>

Answer 3

Answer №2

To enable vertical scrolling for a table, you need to specify a height for the container with the "scroll" class. Here's an example:

.scroll{
    overflow-y:scroll;
    max-height: 100px;
    max-width: 200px;
}
table {
  width: 100%;
}

<div class = scroll>
  <table border="1">
    <tbody>
      <tr>
        <th>Number</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

To enable vertical scrolling for a table, you need to specify a height for the container with the "scroll" class. Here's an example:

.scroll{
    overflow-y:scroll;
    max-height: 100px;
    max-width: 200px;
}
table {
  width: 100%;
}

<div class = scroll>
  <table border="1">
    <tbody>
      <tr>
        <th>Number</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Hello</td>
      </tr>
    </tbody>
  </table>
</div>

Creating a scrollable HTML table

Answer №1

Answer №2

Similar questions

node js returning undefined value

Displaying a base64 image in a new tab with JavaScript on iOS devices

As the page is resized or zoomed in and out, the div elements start shifting in different directions

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

Aligning content vertically with a floating element in a design that adapts to different

Ensuring the scroll bar is consistently positioned at the bottom

A Guide to Mapping JSON Status for Handling Stale Elements in Selenium with Java

Issue: Java error - unrecognized flag: -release

Unable to find the Java image file location

The progress bar on my browser disappears when I click a link in my Next.js (React) application

Place element H1 below H2 on the webpage, but keep it positioned above H2 in the underlying

Determining if a division results in an integer or a float in Java

Can the HTML of a link's target be altered after the link has been clicked without relying on a browser extension?

Unleash the power of CSS3 to style this button

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

The anchor hover state will persist even after clicking the link

Updating checkbox Icon in Yii2

Determine the frequency of a specific value occurring in a two-dimensional array and then record that count in a separate one-dimensional array

Incorporate JSON data to display SVG images

Is it possible to dynamically change an ngModel value directly from the component?