Add A Scroll Bar To Large Tables

Sometimes you need to provide a lot of information in a table format. Large tables can be hard to read when they are shrunk down on mobile devices. You can quickly add a piece of code to your table to give it a horizontal scroll bar. When mobile readers view your blog, they can scroll through the table. 

First you will need to add your table. Click on the Table drop down and select Table. Highlight how many cells you will need. 

After you have inserted your table you can customize it by adding your content and changing the properties. 

Once your table is complete, click on the HTML tab on the top right of the compose page. Find the table in the HTML. The table starts with <table> and ends with </table>.  A great way to help block out this code is to put a space before and after the table code.  

Here is how it looks before you enter the code:

Above your <table> tag, add the following code: 

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

After <\table> add the following code:

</div>

Here is how it looks after you add the code

Save/Publish your changes, then click on the Rich Text tab to see your table. You may not see the horizontal scroll bar on the compose page, so preview or publish your post to see the scroll bar.

Check out the horizontal scroll bar in action. We have added it to the table below. You may need to reduce the size of your browser window or view this post on a mobile device to see the scroll bar at the bottom of the table.

	Grade	Grade	Grade	Grade	Grade	Grade	Grade	Grade	Grade	Grade
Eric	75%	80%	100%	94%	87%	100%	79%	86%	92%	86%
June	95%	78%	100%	86%	73%	96%	97%	92%	86%	94%

When creating any post you need to make sure you keep your mobile readers in mind. When the table is viewed on a mobile device your readers will be able to horizontally scroll through all your columns and easily read your table. Make sure you are using one of our mobile themes so your blogs looks flawless on mobile devices. 

Go to your account now to get started!