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
🐛 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. 😄