ugh

css/rulesAssistant/raSummary.css

@@ -3,10 +3,32 @@
     height: 90vh
 }
 
-table.finances {
+.ra-sum {
     text-align: left;
     border-collapse: separate;
-    border-style: hidden;
     empty-cells: hide;
-    border: "1"
+}
+
+.ra-sum-cell {
+    border-style: solid;
+    border: 1px;
+    border-color: grey;
+}
+
+tr.ra-sum.header {
+    position:sticky;
+    top:0px;
+    z-index:2;
+    background:#111;
+}
+
+th.ra-sum.first-header-cell {
+    empty-cells: show
+}
+
+td.ra-sum.row-title {
+    position:sticky;
+    left: 0px;
+    z-index:1;
+    background:#111;
 }

src/js/rulesAssistantSummary.js

@@ -7,14 +7,39 @@ new App.DomPassage("Rules Assistant Summary", () => {
 	App.UI.DOM.appendNewElement("div", el, `Here you can see an overview of all of your rules at the same time.`, "scene-intro");
 	App.UI.DOM.appendNewElement("div", el, `Rules further to the right will always take priority, but some rules may not apply to all slaves.`, "scene-intro");
 
-	const table = App.UI.DOM.appendNewElement("table", el);
-	table.append(RASummaryCell());
+	el.append(makeTable());
 	return el;
 	/**
 	 * Creates a table to summarize RA
-	 * @returns {string}
+	 * @returns {HTMLTableElement}
 	 */
-	function RASummaryCell() {
+	function makeTable() {
+		const table = App.UI.DOM.makeElement("table", null, "ra-sum");
+		/** @type {FC.RA.Rule[]} */
+		const rules = V.defaultRules;
+
+		if (rules.length === 0) {
+			return table;
+		}
+
+		/* start row title */
+		const header = App.UI.DOM.appendNewElement("tr", table, null, ["ra-sum", "header"]);
+		App.UI.DOM.appendNewElement("th", header, null, ["ra-sum", "first-header-cell"]);
+
+		/* make rest of row title */
+		for (const rule of rules) {
+			App.UI.DOM.appendNewElement("th", header, rule.name, "ra-sum-cell");
+		}
+
+		const setters = rules.map(r => r.set);
+		/* A row for every condition the RA can set. */
+		/* start loop for row*/
+
+		walkObject(emptyDefaultRule().set, (obj, path) => {
+			addRow(path, collectMemberFromObjects(setters, path));
+		}, []);
+
+		return table;
 		/**
 		 * @param {object[]} objects
 		 * @param {string[]} member
@@ -57,12 +82,12 @@ new App.DomPassage("Rules Assistant Summary", () => {
 		/**
 		 * @param {string[]} path
 		 * @param {Array} cells
-		 * @param {string[]} table
 		 */
-		function addRow(path, cells, table) {
+		function addRow(path, cells) {
 			if (!cells.some(v => v !== null)) { // skip empty rows
 				return;
 			}
+			const row = App.UI.DOM.makeElement("tr");
 
 			function ruleSetValueToString(v) {
 				if (typeof v === 'object') {
@@ -77,41 +102,12 @@ new App.DomPassage("Rules Assistant Summary", () => {
 				return `${v}`;
 			}
 
-			let r = `<td style="position:sticky; left: 0px; background:#111; z-index:1;">${path.join('.')}</td>`;
+			App.UI.DOM.appendNewElement("td", row, path.join('.'), ["ra-sum", "row-title", "ra-sum-cell"]);
 			for (const cell of cells) {
-				r += cell !== null ? `<td>${ruleSetValueToString(cell)}</td>` : '<td></td>';
+				const content = cell !== null ? ruleSetValueToString(cell) : null;
+				App.UI.DOM.appendNewElement("td", row, content, "ra-sum-cell");
 			}
-			table.push(r);
-		}
-		/** @type {FC.RA.Rule[]} */
-		const rules = V.defaultRules;
-		let r = "";
-
-		if (rules.length === 0) {
-			return '';
-		}
-
-		/* start row title */
-		r += `<tr style="z-index:2; position:sticky; top:0px; background:#111;"><th style="empty-cells: show"></th>`;
-
-		/* make rest of row title */
-		for (const rule of rules) {
-			r += `<th>${rule.name}</th>`;
-		}
-		r += `</tr>`;
-
-		const setters = rules.map(r => r.set);
-		/* A row for every condition the RA can set. */
-		/* start loop for row*/
-
-		let tableRows = [];
-		walkObject(emptyDefaultRule().set, (obj, path) => {
-			addRow(path, collectMemberFromObjects(setters, path), tableRows);
-		}, []);
-
-		for (const row of tableRows) {
-			r += `<tr>${row}</tr>`;
+			table.append(row);
 		}
-		return r;
-	};
+	}
 });