Ghost

Overcoming Table Stacking in Ghost’s Source Theme: Insights into Version 1.2.2

Graydon Schwartz

Graydon Schwartz

— 1 min read
Overcoming Table Stacking in Ghost’s Source Theme: Insights into Version 1.2.2
Overcoming Table Stacking in Ghost’s Source Theme: Insights into Version 1.2.2

While learning and working with the Source theme for Ghost, I encountered an issue where multiple tables, when created, would load on top of or close to each other on the page.

I figured out that the issue involved the way the tables were wrapped.

/* Responsive HTML table */
(function () {
    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');
    const wrapper = document.createElement('div');
    wrapper.className = 'gh-table';

    tables.forEach(function (table) {
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
    });
})();

main.js (before)

/* Responsive HTML table */
(function () {
    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');

    tables.forEach(function (table) {
        const wrapper = document.createElement('div');
        wrapper.className = 'gh-table';
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
    });
})();

main.js (after)

Last week, version 1.2.2 of the theme included a fix for the table issue, and @minimaluminium mentioned me in acknowledgment of my fix suggestion.

Release 1.2.2 · TryGhost/Source
Compatible with Ghost ≥ 5.67.0 🐛 Fixed multiple table elements being merged into one wrapper issue
GitHubTryGhost
  • 🐛 Fixed multiple table elements being merged into one wrapper issue

It was both humbling and exciting to figure out a way to fix the issue on February 19 of this year and share it with the Ghost team. 😄

Read more