tables.scss

.markdown-body table {
  border-collapse: collapse;
  position: relative;
  font-size: 90%;
  /* We want to keep table-layout: auto so that column widths dynamically adjust;
  otherwise entries get needlessly smushed into narrow columns. As a workaround,
  we use javascripts/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: 100%;
    background: none;
    padding: 0;
    font-weight: bold;
  }

  thead tr {
    border: none;
  }

  th {
    font-weight: normal;
    text-align: left;
    position: sticky;
    vertical-align: top;
    z-index: 1;
    top: 0;
    background: white;
    box-shadow: 0 3px 0 0 $gray-400;
    padding: 12px 8px;
    border: 0px;
  }

  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.slim {
      table-layout: auto;
    }
  }
}