Horizontal Scrollbar


Learn how to create horizontal scrollbar for table.

Create Horizontal Scroll bar 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



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.

how to create horizontal scroll bar in html



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