Create Horizontal Scrollbar

Horizontal Scrollbar

Learn how to create horizontal scrollbar for table.

how to create horizontal scroll bar in html

You can use this page to Learn how to create a horizontal scrollbar for table, that can be used to view a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scrollbar when needed.

How to Create Horizontal Scrollbar for Table

• Horizontal Scrollbar CSS

• Horizontal Scrollbar HTML

Why should need Horizontal Scrollbar for Table?

a horizontal scrollbar should needed when the screen is too small to display the full table content. and If you have a table that is too wide, you can add a horizontal scrollbar in the table, and it will display a horizontal scrollbar when needed to display the full table content.

Horizontal Scrollbar CSS

Add following CSS code. if you need to add CSS code, you can read that article on this page to how to add CSS code.

/* Aroed - Horizontal Scrollbar - CSS code */
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #ffffff}
</style>

Note: you can also made changes in this code to customize horizontal scrollbar and table view as per your choice.

Horizontal Scrollbar HTML

HTML Div Tag Horizontal Scrollbar

you can add following container element with overflow-x:auto around the table.

<div style="overflow-x:auto;">
  <table>
    HERE YOUR TABLE CONTENT
  </table>
</div>

I hope now you get all the information about How to Create Horizontal Scrollbar for Table.

Note: In Mac OS, scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" or auto is set).

Now it's your turn

If you like this amazing post then leave a comment below and tell is this helpful for you or not.

{Sharing Is Caring} – If you believe in this then share this article now

Share if you believe in Sharing is Caring