table.scss

@import "@primer/css/support/variables/typography.scss";
@import "src/frame/stylesheets/breakpoint-xxl.scss";

.markdownBody {
  table {
    display: table; // Primer CSS sets to block
    width: 100%; // Primer CSS sets to max-content
    font-size: $body-font-size;
    text-align: left;

    // For mobile (small viewports) we need to fix the table
    // because if the table is larger than the viewport
    // it will force the width of the table causing issues
    // with the header on scroll
    :not(:global(.has-nested-table)) & {
      table-layout: fixed;
    }

    // We want to keep table-layout: auto so that column widths dynamically adjust;
    // otherwise entries get needlessly squashed into narrow columns. As a workaround,
    // we use components/lib/wrap-code-terms.js to prevent some reference table content
    // from expanding beyond the horizontal boundaries of the parent element.
    @media (min-width: 544px) {
      table-layout: auto;
    }

    // **The follow selectors must be with `table` to override Primer CSS**

    // Remove zebra striping
    tr:nth-child(2n) {
      background-color: transparent;
    }

    // Make the header sticky
    thead {
      position: sticky;
      top: 105px; // 88 + 8 + 8 + 1, space for the site header
      z-index: 1; // Ensure header stays above content including superscripts

      @include breakpoint-xxl {
        top: 65px !important; // 48 + 8 + 8 + 1, space for the site header
      }
    }

    // Redraw borders as inset box-shadow to keep the border with sticky header
    tr,
    th,
    td {
      border: none;
    }

    thead th,
    thead td {
      box-shadow: inset 0 -2px var(--color-border-muted);
    }

    tbody th,
    tbody td {
      box-shadow: inset 0 -1px var(--color-border-muted);
    }

    tbody tr:last-child th,
    tbody tr:last-child td {
      box-shadow: none;
    }

    // Adjust styling from Primer for spacing and text alignment
    th,
    td {
      padding: 0.75rem 0.5rem;
      vertical-align: top;
    }

    th:first-child,
    td:first-child {
      padding-left: 0;
    }

    pre {
      margin-top: 0.25rem; // Defaults to 0.5rem, but looks off with vertical-align: top
    }

    p:last-child {
      margin-bottom: 0; // Autogenerated content
    }
  }
}