styles/elements/table.css

@@ -0,0 +1,21 @@
+/*
+This styling is unscoped in order to make it so that it still applies
+to the chat messages which are not within a scope I control.
+*/
+table.taf-query-summary {
+	margin: 0px;
+
+	tr:hover > td {
+		background-color: var(--table-header-border-highlight);
+	}
+
+	td {
+		padding: 4px 8px;
+		border: 1px solid var(--table-header-border-color);
+		width: 40%;
+
+		&:first-of-type {
+			width: 60%;
+		}
+	}
+}

styles/main.css

@@ -14,6 +14,7 @@
 @import url("./elements/input.css") layer(elements);
 @import url("./elements/p.css") layer(elements);
 @import url("./elements/prose-mirror.css") layer(elements);
+@import url("./elements/table.css") layer(elements);
 
 /* Apps */
 @import url("./Apps/common.css") layer(apps);

templates/query-response.hbs

@@ -0,0 +1,16 @@
+{{#if answers}}
+	<table class="taf-query-summary">
+		<tr>
+			<td>Key</td>
+			<td>Value</td>
+		</tr>
+		{{#each answers as | answer |}}
+			<tr>
+				<td>{{ @key }}</td>
+				<td>{{ answer }}</td>
+			</tr>
+		{{/each}}
+	</table>
+{{else}}
+No data submitted
+{{/if}}