Text in table cells can now be aligned. Table now works in firefox.

src/core/gui/Table.css

@@ -1,4 +1,5 @@
 .core_Table {
+    position: relative;
     display: block;
     box-sizing: border-box;
     overflow: auto;
@@ -11,10 +12,16 @@
     align-items: stretch;
 }
 
+.core_Table thead  {
+    position: sticky;
+    display: inline-block;
+    top: 0;
+    z-index: 2;
+}
+
 .core_Table thead tr {
     position: sticky;
     top: 0;
-    z-index: 2;
 }
 
 .core_Table th,

src/core/gui/Table.ts

@@ -12,6 +12,7 @@ export type Column<T> = {
     title: string;
     sticky?: boolean;
     width?: number;
+    text_align?: string;
     create_cell(value: T, disposer: Disposer): HTMLTableCellElement;
 };
 
@@ -43,14 +44,14 @@ export class Table<T> extends Widget<HTMLTableElement> {
                     text: column.title,
                 });
 
-                if (column.width != undefined) th.style.width = `${column.width}px`;
-
                 if (column.sticky) {
                     th.style.position = "sticky";
                     th.style.left = `${left}px`;
                     left += column.width || 0;
                 }
 
+                if (column.width != undefined) th.style.width = `${column.width}px`;
+
                 return th;
             }),
         );
@@ -97,14 +98,16 @@ export class Table<T> extends Widget<HTMLTableElement> {
             ...this.columns.map(column => {
                 const cell = column.create_cell(value, disposer);
 
-                if (column.width != undefined) cell.style.width = `${column.width}px`;
-
                 if (column.sticky) {
                     cell.style.position = "sticky";
                     cell.style.left = `${left}px`;
                     left += column.width || 0;
                 }
 
+                if (column.width != undefined) cell.style.width = `${column.width}px`;
+
+                if (column.text_align) cell.style.textAlign = column.text_align;
+
                 return cell;
             }),
         );

src/hunt_optimizer/gui/MethodsForEpisodeView.ts

@@ -65,6 +65,7 @@ export class MethodsForEpisodeView extends ResizableWidget {
                         return {
                             title: npc_data(enemy_type).simple_name,
                             width: 80,
+                            text_align: "right",
                             create_cell(method: HuntMethodModel): HTMLTableDataCellElement {
                                 const count = method.enemy_counts.get(enemy_type);
                                 return el.td({ text: count == undefined ? "" : count.toString() });

src/hunt_optimizer/gui/OptimizerView.ts

@@ -4,12 +4,9 @@ import { WantedItemsView } from "./WantedItemsView";
 import "./OptimizerView.css";
 
 export class OptimizerView extends ResizableWidget {
-    private readonly wanted_items_view: WantedItemsView;
-
     constructor() {
         super(el.div({ class: "hunt_optimizer_OptimizerView" }));
 
-        this.wanted_items_view = this.disposable(new WantedItemsView());
+        this.element.append(this.disposable(new WantedItemsView()).element);
-        this.element.append(this.wanted_items_view.element);
     }
 }