HTML - How to create a Horizontally Scrollable Table
You can see it in the below live demo of a table
| Entry Header 1 | Entry Header 2 | Entry Header 3 | Entry Header 4 | Entry Header 5 | Entry Header 6 | Entry Header 7 | Entry Header 9 |
|---|---|---|---|---|---|---|---|
| Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line |
| Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line |
| Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line | Entry First Line |
This is how you do it
<div class="horizontalScroll">
<table>
<!-- Your data here---->
</table>
</div>div.horizontalScroll {
overflow: hidden;
overflow-x: auto;
}
div.horizontalScroll table{
/* your table styles */
} ALTERNATE TITLES