How to add horizontal scroll on table overflow?

Question

I am trying to add a horizontal scroll on the table only if the table overflow. table

.display {
  width: 100%;
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
}

<table class="display">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Date Time</th>
      <th>Details</th>
      <th>Details_1</th>
      <th>Details_2</th>
      <th>Details_3</th>
      <th>Details_4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>53</td>
      <td>Jenny</td>
      <td>2009/10/09</td>
      <td>Developer</td>
      <td>Developer_1</td>
      <td>Developer_2</td>
      <td>Developer_3</td>
      <td>Developer_4</td>
    </tr>
  </tbody>
</table>

but, I am facing a problem. When the columns decrease, the horizontal scroll still remains there and the width of the table also decreases. I only want to add the scroll when the table overflows.

Wrap your table with a div and set its width or max-width and overflow-x: scroll; — Harinder Singh
– Harinder Singh, Commented Dec 26, 2020 at 14:35

Khaliq Izrail · Accepted Answer · 2020-12-26 14:39:32Z

2

Please add a other overflow as "auto" to your css.

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

Hope it will work for you.

answered Dec 26, 2020 at 14:39

Khaliq Izrail

1052 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add horizontal scroll on table overflow?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related