resources/web/style/table.pcss

#guide {
  .table-contents, .informaltable {
    /* Without this tables will "expand" based on the widest elements, escape
     * their containing width, and end up under the nav bar. With this they
     * are harmlessly "contained". They might look ugly this way, but the
     * damage is minimized. */
    overflow: auto;
  }
  table {
    margin-bottom:2em;
    border: none;
    width: 100%;

    /* Allow wrapping in some code and pre tags inside tables. */
    .literal {
      white-space: initial;
    }
    /* But *not* those in the first column. Those are usually the names of
     * variables and things and they don't make a lot of sense to wrap. */
    td:first-child .literal {
      white-space: nowrap;
    }
  }
  thead, tbody {
    text-align:left;
    vertical-align:top;
  }
  th {
    font-weight: 700;
    padding: 1.75em 0.6em 0;
  }
  td {
    vertical-align: top;
    padding: 1.75em 0.6em 0;
  }
  th, td {
    border: none;
    border-bottom: 1px solid #e5eae4;

    &:last-child {
      padding-right: 0.15em;
    }

    &:first-child {
      padding-left: 0.15em;
    }
  }

  tr {
    &:last-child {
      th, td {
        border: none;
      }
    }
  }

  .monospaced {
    td p, th {
      font-family: Consolas, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", monospace;
    }
  }

  table.styled {
    position: relative;
    z-index: 2;
    margin-bottom:2em;
    border: none;
    width: calc(100% - 10px);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
    th, td, tr:last-child th, tr:last-child td {
      border: none;
      border-left: 1px solid #F1F4F9;
      border-top: 1px solid #F1F4F9;
    }
    td p {
      margin: 0;
    }
    th {
      font-weight: 700;
      padding: 0.4em;
      background: #F1F4F9;
    }
    td {
      vertical-align: top;
      padding: 0.4em 0.4em;
    }
    tr:nth-child(even) td {
      background: #F1F4F9;
    }

    tr:nth-child(even) td[rowspan] {
      background: none;
    }

    td[rowspan] {
      vertical-align: middle;
    }
  }

  /** Used in integration docs */
  .condensed-table {
    table {
      tbody {
        tr {
          border-bottom: 1px solid #e5eae4;
          &:first-child {
            border-top: 1px solid #e5eae4!important;
          }
          td {
            vertical-align: top;
            padding: 0.6em;
          }
          p {
            margin-bottom: 0px!important;
          }
        }
      }
    }
  }
}