CSS: General Tables

<style>
/* ========================================
   GENERAL TABLES - Core Structure & Layout
   Applies to ALL tables unless overridden
   ======================================== */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
  background-color: #f8f8f8;
  margin-left: auto;
  margin-right: auto;
  min-width: 700px;
}

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

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

/* Table Cells */
table th,
table td {
  padding: 0.75rem 1rem;
  border: none;
  vertical-align: top;
}

/* Horizontal Borders */
table tr:not(:last-child) td,
table tr:not(:last-child) th {
  border-bottom: 1px solid #a6a6a6;
}

table tbody tr + tr td[rowspan],
table tbody tr + tr th[rowspan] {
  border-top: 1px solid #a6a6a6 !important;
}

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

/* Subheaders */
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;
}

table .last-subheader {
  border-bottom: none !important;
  background-color: #e6e6e6;
  font-weight: bold;
}

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;
}

.lowercase {
  text-transform: lowercase;
}

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

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

/* Links in tables */
table a {
  line-height: 1;
}

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

html.dark-mode table .subheader {
  background-color: #2a2a2a;
  border-bottom: 1px solid #4d4d4d !important;
}

html.dark-mode table .last-subheader {
  border-bottom: none !important;
  background-color: #2a2a2a;
}

html.dark-mode table tr:has(.last-subheader) td[rowspan] {
  border-bottom: none !important;
}

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

html.dark-mode table th,
html.dark-mode table td {
  border: none;
}

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;
}

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

html.dark-mode table tbody tr:last-of-type td,
html.dark-mode table tbody tr:last-of-type th {
  border-bottom: none !important;
}

/* ========================================
   RESPONSIVE - All Tables 
   ======================================== */
@media screen and (max-width: 600px) {
  table {
    min-width: auto;
  }
  table thead th {
    white-space: normal;
  }
}
</style>