CSS: General Tables

general-tables.css

/* General Tables */
/* Main Table Structure */
table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 0.95rem;
        background-color: #f8f8f8;
        table-layout: fixed;
        margin-left: auto;
        margin-right: auto;
        min-width: 700px;
      }

      .table-container { /* Enable table overflow */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

/* Table Headers */
      table thead th { /* Header styling */
        background: linear-gradient(135deg, #902424, #b03030);
        color: #fff;
        text-align: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
      }

/* Table Cells */
      table th,
      table td { /* Header and body styling */
        padding: 0.75rem 1rem;
        border: none; /* reset outer borders */
        vertical-align: top;
      }

/* Horizontal Borders */
      /* Thin horizontal internal borders */
      table tr:not(:last-child) td,
      table tr:not(:last-child) th {
        border-bottom: 1px solid #a6a6a6;
      }
      /* Internal vertical borders (top row override) */
      table tbody tr + tr td[rowspan],
      table tbody tr + tr th[rowspan] {
        border-top: 1px solid #a6a6a6 !important;
      }

/* Vertical Borders */
      /* Internal vertical borders (skip last column) */
      table td:not(:last-child),
      table th:not(:last-child) {
        border-right: 2px solid #a6a6a6;
      }

/* Subheaders */
      /* Subheader styling */
      table .header-row {
        background: linear-gradient(135deg, #902424, #b03030);
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      table .subheader {
        background-color: #e6e6e6;
        font-weight: bold;
        border-bottom: 1px solid #a6a6a6 !important; /* Separator at each group end */
      }
       
      /* Override for the very last subheader (no bottom line at table end) */
      table .last-subheader {
        border-bottom: none !important;
        background-color: #e6e6e6;
        font-weight: bold;
      }
      /* Remove bottom border on spanned cells in the last subheader row */
      table tr:has(.last-subheader) td[rowspan] {
        border-bottom: none !important;
      }

      table .subheader2 {
        background-color: #e6e6e6;
        font-style: italic;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
      }

      table .subheader3 {
        background-color: #e6e6e6;
        font-style: italic;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        vertical-align: middle;
        padding-left: 40px;
      }

      table .lowercase {
        text-transform: lowercase;
      }

/* Thin Rows */
      /* Thin row styling override */
      table tbody tr.thin-row > th,
      table tbody tr.thin-row > td {
        border-top: 1px solid #a6a6a6 !important;
      }

/* Last Row */
      /* Remove bottom border on last visible table row */
      table tbody tr:last-of-type td,
      table tbody tr:last-of-type th {
        border-bottom: none !important;
      }

/* Dark Mode Tables */
      /* === DARK MODE === */
      html.dark-mode table {
        background-color: #242424;
      }

      html.dark-mode table .subheader {
        background-color: #2a2a2a;
        border-bottom: 1px solid #4d4d4d !important; /* Separator at each group end */
      }

      html.dark-mode table .last-subheader {
        border-bottom: none !important;
        background-color: #2a2a2a;
      }
      
      /* Dark mode: Remove bottom border on spanned cells in the last subheader row */
      html.dark-mode table tr:has(.last-subheader) td[rowspan] {
        border-bottom: none !important;
      }

      html.dark-mode table .subheader2 {
        background-color: #2a2a2a;
      }

      html.dark-mode table .subheader3 {
        background-color: #2a2a2a;
      }

      /* Dark mode borders — internal only */
      html.dark-mode table th,
      html.dark-mode table td {
        border: none;
      }
      /* Internal vertical borders (top row override) */
      html.dark-mode table tbody tr + tr td[rowspan],
      html.dark-mode table tbody tr + tr th[rowspan] {
        border-top: 1px solid #4d4d4d !important;
      }

      html.dark-mode table tr:not(:last-child) td,
      html.dark-mode table tr:not(:last-child) th {
        border-bottom: 1px solid #4d4d4d;
      }

      html.dark-mode table td:not(:last-child),
      html.dark-mode table th:not(:last-child) {
        border-right: 2px solid #4d4d4d;
      }

      /* Preserve thin-row borders in dark mode */
      html.dark-mode table tbody tr.thin-row > th,
      html.dark-mode table tbody tr.thin-row > td {
        border-top: 1px solid #4d4d4d !important;
      }

      /* Dark Mode: Remove bottom border on last visible table row */
      html.dark-mode table tbody tr:last-of-type td,
      html.dark-mode table tbody tr:last-of-type th {
        border-bottom: none !important;
      }

/* Table Responsive */
      /* Responsive adjustment */
      @media screen and (max-width: 600px) {
        table {
          min-width: auto;
        }
        table thead th {
          white-space: wrap;
        }
      }
     
      table a {
      line-height: 1;
      }