diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index 8fe71876fb26..4568bb8293b7 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -3,9 +3,76 @@
     width: calc(100% + 6rem);
   }
 
+  .bc-table-container {
+    margin: 1rem -3rem 0;
+    max-height: calc(100vh - var(--main-document-header-height) - 8rem);
+  }
+
   .bc-table {
+    border: none;
+    margin: 0 0 1rem;
+
+    tbody tr {
+      td:last-child {
+        border-right: 1px solid var(--border-primary);
+      }
+
+      th {
+        border-left: 1px solid var(--border-primary);
+      }
+
+      &:last-child {
+        td {
+          border-bottom-color: var(--border-primary);
+
+          &:last-child {
+            border-bottom-right-radius: var(--elem-radius);
+          }
+        }
+
+        th {
+          border-bottom-color: var(--border-primary);
+          border-bottom-left-radius: var(--elem-radius);
+        }
+      }
+    }
+
+    thead {
+      background-color: var(--background-primary);
+      position: sticky;
+      top: 0;
+      z-index: var(--z-index-low);
+    }
+
     tbody th {
       width: 20%;
     }
   }
+
+  .bc-browsers {
+    td {
+      border-left: 1px solid var(--border-primary);
+    }
+
+    th:last-child {
+      border-right: 1px solid var(--border-primary);
+    }
+  }
+
+  .bc-platforms {
+    td {
+      border-left: 1px solid var(--border-primary);
+      border-top: 1px solid var(--border-primary);
+      border-top-left-radius: var(--elem-radius);
+    }
+
+    th {
+      border-top: 1px solid var(--border-primary);
+
+      &:last-child {
+        border-right: 1px solid var(--border-primary);
+        border-top-right-radius: var(--elem-radius);
+      }
+    }
+  }
 }
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
index 82a8c1294f72..66f80b736ea5 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
@@ -4,6 +4,10 @@
     width: 100%;
   }
 
+  .bc-table-container {
+    margin: 1rem 0 0;
+  }
+
   .table-container-inner {
     padding: 0;
   }
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index 82241659a1cc..72dd5974a907 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -41,15 +41,6 @@
     tr {
       height: 3rem;
 
-      @media screen and (min-width: $screen-md) {
-        &:last-child {
-          th,
-          td {
-            border-bottom-width: 0;
-          }
-        }
-      }
-
       th {
         border-left-width: 0;
         vertical-align: middle;
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.tsx b/client/src/document/ingredients/browser-compatibility-table/index.tsx
index b1abf0bb7716..ba0b622fd98a 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.tsx
+++ b/client/src/document/ingredients/browser-compatibility-table/index.tsx
@@ -175,7 +175,7 @@ export default function BrowserCompatibilityTable({
         >
           Report problems with this compatibility data on GitHub
         </a>
-        <figure className="table-container">
+        <figure className="table-container bc-table-container">
           <figure className="table-container-inner">
             <table key="bc-table" className="bc-table bc-table-web">
               <Headers