Making Tables Scroll When They're Too Wide for the Page

The code in this article is only for V1, V2, and V3 templates, and we no longer maintain it. Tables scroll automatically on V4 and V5 templates. We strongly recommend upgrading to a V5 template.

Gotta show a lot of data at once? Tables are a great fit. Except if you end up with a lotta data in your table, it might go off the page.

Fear not. On V4 and V5 templates, tables that are too wide already scroll sideways inside the article, so there's nothing to set up.

If you've set column widths on a table in the editor, it fits the article at those widths and long text wraps inside its column instead of scrolling.

Older Templates

On a V1, V2, or V3 template, paste this JavaScript into Settings > Customize > Code > JavaScript and we'll make your tables scroll instead:

<script>
    (function() {
        $(function() {
            $('table').addClass('table').addClass('table-responsive').attr('border', 0);
        });
    })();
</script>

This snippet relies on jQuery, which only V1, V2, and V3 templates load. It won't work on V4, V5, or custom templates. On a custom template, add overflow-x: auto to your own table CSS instead.

You'll need a HelpDocs plan with Custom Javascript to use the JavaScript tab.