← All changes | src/frontend/responsive.ts +42 -0 1.1.5 → 1.2.0 View file →

		@@ -155,9 +155,49 @@
155	155	repeatFirstCol,
156	156	};
157	157	}
158	158
	159	+/**
	160	+ * Stacked tables lose their column gap: the space between columns comes from
	161	+ * the horizontal half of `border-spacing`, but once the cells sit in their own
	162	+ * rows only the vertical half is visible. Borrow the horizontal value for the
	163	+ * vertical gap while stacked, and put the original back on the way out.
	164	+ */
	165	+function applyStackSpacing(table: HTMLTableElement) {
	166	+ if (typeof table.dataset.tablebergSpacing === "string") {
	167	+ return;
	168	+ }
	169	+
	170	+ const [horizontal, vertical] = window
	171	+ .getComputedStyle(table)
	172	+ .borderSpacing.split(" ");
	173	+
	174	+ if (!horizontal) {
	175	+ return;
	176	+ }
	177	+
	178	+ const gap = parseFloat(horizontal);
	179	+ if (!(gap > 0) || gap <= parseFloat(vertical ?? horizontal)) {
	180	+ return;
	181	+ }
	182	+
	183	+ table.dataset.tablebergSpacing = table.style.borderSpacing;
	184	+ table.style.borderSpacing = `${horizontal} ${horizontal}`;
	185	+}
	186	+
	187	+function restoreStackSpacing(table: HTMLTableElement) {
	188	+ const original = table.dataset.tablebergSpacing;
	189	+ if (typeof original !== "string") {
	190	+ return;
	191	+ }
	192	+
	193	+ table.style.borderSpacing = original;
	194	+ delete table.dataset.tablebergSpacing;
	195	+}
	196	+
159	197	function reviveTable(table: HTMLTableElement) {
	198	+ restoreStackSpacing(table);
	199	+
160	200	const oldMode = table.dataset.tablebergLast;
161	201	if (!oldMode) {
162	202	return;
163	203	}
		@@ -541,8 +581,10 @@
541	581	breakpoint.stackCount,
542	582	renderTag
543	583	);
544	584	}
	585	+
	586	+ applyStackSpacing(table);
545	587
546	588	table.dispatchEvent(new CustomEvent(TABLEBERG_RESPONSIVE_CHANGED_EVENT));
547	589	}
548	590