How to add a scrollbar to a table in html

1.4K followers

7 years ago

Adding a scrollbar to a table is useful, if you want to add additional rows to the table that don't fit into the normal screen or when the table would be cut in half on a mobile device such as a smartphone with a smaller screen.

I run into this issue even though my wordpress theme is responsive.

Here is a simple html code that you can add to the html table code which makes your table scrollable:

Before the table you add into the html text field:

<div style="overflow-x: auto;">

After the table you add:

</div>

This is an example:

This would be the code for the above table with the scrollbar:

<div style="overflow-x: auto;">
<table style="width: 1000px;">
<tbody>
<tr>
<td style="width: 120px;">table row 1</td>
<td style="width: 120px;">table row 2</td>
<td style="width: 120px;">table row 3</td>
<td style="width: 120px;">table row 4</td>
<td style="width: 120px;">table row 5</td>
<td style="width: 120px;">table row 6</td>
</tr>
<tr>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
</tr>
<tr>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
<td style="width: 120px;"></td>
</tr>
</tbody>
</table>
</div>