diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index f08bb64..f247260 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -350,8 +350,12 @@ export default function DataTable<T>({
       {/* Wide screens: table. The wrapper isn't clipped so header filter popovers can overflow. */}
       <div className="hidden md:block">
         <table className="w-full border-collapse text-sm">
-          <thead>
-            <tr className="text-muted border-b border-border">
+          {/* Sticky header row: the column headers stay put at the top of the page scroller while
+              the rows scroll under them. `bg-bg` on each cell keeps rows from showing through; the
+              border rides a pseudo-element (box-shadow) since a sticky <tr>'s own border scrolls
+              away with the collapsed table box in some browsers. */}
+          <thead className="sticky top-0 z-10">
+            <tr className="text-muted [&>th]:shadow-[inset_0_-1px_0_var(--border)]">
               {columns.map((col) => {
                 const sorted_ = sort?.key === col.key;
                 const filterOn = isActive(filters[col.key]);
@@ -359,7 +363,7 @@ export default function DataTable<T>({
                   <th
                     key={col.key}
                     style={col.width ? { width: col.width } : undefined}
-                    className={`relative font-medium px-2 py-2 whitespace-nowrap ${align(col.align)}`}
+                    className={`relative font-medium px-2 py-2 whitespace-nowrap bg-bg ${align(col.align)}`}
                   >
                     <span className="inline-flex items-center gap-1">
                       <button