How to add a scrollbar to a table in html

Last Update: May 14, 2017

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>

I hope this may help you.

Sibylle

Join the Discussion
Write something…
Recent messages
Ongchannel Premium
That is useful tip. thank you.
Reply
carpediem1 Premium
You are welcome:-)
Reply
MKearns Premium
Great backend advice!
Reply
carpediem1 Premium
Thanks:-)
Reply
Dmorrow Premium
I will keep this in mind - not ready to try HTML just yet. Thanks for sharing!

Blessings,
Debby
Reply
carpediem1 Premium
My pleasure, hope it helps:-)
Blessings to you as well.
Sibylle
Reply
Dmorrow Premium
Thanks!
Reply
AlexEvans Premium
That is very helpful Sibylle thank you very much for sharing.
Reply
carpediem1 Premium
My pleasure, hope it may help at some point.
Sibylle
Reply