diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_table_component.scss
index b752c6b927..986d4729d9 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_table_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_table_component.scss
@@ -60,6 +60,16 @@ $_border-color: #0000001f;
   .header {
     color: mat-color($tb-foreground, text);
     white-space: nowrap;
+
+    // Allows table header to remain sticky to the scrollable container.
+    [role='columnheader'] {
+      background-color: mat-color($tb-background, background);
+      position: sticky;
+      top: 0;
+      // Unlike <thead><tr>, we need to manually "lift" the elements up so it
+      // masks table rows underneath.
+      z-index: 1;
+    }
   }
 
   [role='row'] {
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 45e166a34e..77f5e7ab20 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -41,14 +41,21 @@ $tb-foreground: map_merge(
   )
 );
 
+$tb-background: map_merge(
+  $mat-light-theme-background,
+  (
+    // Default is `map.get($grey-palette, 50)`.
+    background: #fff
+  )
+);
+
 $tb-theme: map_merge(
   $tb-theme,
   (
+    background: $tb-background,
     foreground: $tb-foreground,
   )
 );
 
-$tb-background: map-get($tb-theme, background);
-
 // Include all theme-styles for the components based on the current theme.
 @include angular-material-theme($tb-theme);