Horizontal Scrollbar
Learn how to create horizontal scrollbar for table.
![Create Horizontal Scroll bar for Table Create Horizontal Scroll bar for Table](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49MsH44usHAaOIUaknz7kJWkSrzJ1wvougeN7NFbXbmfafE2aF8TCVfr9o2aM3C-WXrCBUF-zq4pE3eEEMoNYGVMY7WSCeAml8-TQXRmkMv1qY6dJtxWKqAneRSdrgeZpvuqCLUEUk_pF/s1600/horizontal-scroll-bar.png)
how to create horizontal scroll bar in html
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 how to create horizontal scroll bar in html](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fQgpPwCCx-5tHdJ3-s6wku8HrVPfec7qArVfURvhLGnyXkrvAy-YwGkS7mEe9gjtTa7FOK1077FTxoDPI7MMCWOWWGB9-QHPEu7cVTWB3WZx6dsGWXIGVNbZZG-D4pSiiejN_bzX5KlH/s1600/create-horizontal-scrollbar.jpg)
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>
<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 Scrollbaryou can add following container element with overflow-x:auto around the table.
<div style="overflow-x:auto;">
<table>
HERE YOUR TABLE CONTENT
</table>
</div>
<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
0 Comments