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