tables.scss

// Largely overwritten in tables.scss
.markdown-body table {
  display: table;
  table-layout: fixed;
  line-height: 1.5;
}

.markdown-body table {
  border-collapse: collapse;
  position: relative;
  font-size: 90%;
  width: 100%;
  /* 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. */
  table-layout: auto;

  code {
    font-size: 85%;
    padding: 0.2em 0.4em;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: $border-radius;
  }

  pre {
    > code {
      padding: 0;
      background-color: transparent;
    }
  }

  thead tr {
    border: none;
  }

  th {
    font-weight: normal;
    text-align: left;
    position: sticky;
    vertical-align: top;
    z-index: 1;
    top: 0;
    background: var(--color-bg-primary);
    box-shadow: 0 3px 0 0 var(--color-auto-gray-4);
    padding: 12px 8px;
    border: 0px;
  }

  th[align="center"] {
    text-align: center;
  }

  th[align="right"] {
    text-align: right;
  }

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

  td {
    padding: 10px 8px;
    border: 0px;
    vertical-align: top;
  }

  // markdown that has been converted to HTML is often wrapped in <p> tags
  // don't let it interfere with the spacing
  td p {
    padding: 0;
    margin: 0;
  }

  tr:nth-child(2n) {
    background: none;
  }

  td.has-nested-table {
    width: 100%;

    table {
      table-layout: auto;
    }
  }
}