Update public/styles.css

public/styles.css

@@ -232,6 +232,49 @@ legend {
   background: #ccc;
   border-radius: 6px;
 }
+/* Spreadsheet-style Trends table */
+#trends-table-container {
+  max-height: 50vh;       /* adjust as needed */
+  overflow: auto;
+  border: 1px solid #ddd;
+  margin-bottom: 1rem;
+}
+#trends-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+#trends-table th,
+#trends-table td {
+  padding: 8px;
+  text-align: center;
+  border-bottom: 1px solid #ddd;
+}
+#trends-table thead th {
+  position: sticky;
+  top: 0;
+  background: #f2f2f2;
+  border-bottom: 2px solid #ccc;
+  cursor: pointer;
+  user-select: none;
+}
+/* zebra striping */
+#trends-table tbody tr:nth-child(even) {
+  background: #fafafa;
+}
+/* sort arrow indicators */
+.sortable::after {
+  content: '▲▼';
+  font-size: 0.6em;
+  margin-left: 4px;
+  color: #888;
+}
+.sortable.asc::after {
+  content: '▲';
+}
+.sortable.desc::after {
+  content: '▼';
+}
 
 /* ================= TOOLTIP ================= */
 .tooltip {