rx-table.css

harun.bspt2014@gmail.com

I’ll build this as a production-ready assets/css/rx-table.css file for RX Theme: global table styling, responsive mobile tables, Gutenberg/table-block support, medical-content readability, accessibility, dark mode, print mode, and utility classes.

Dear friend, create this file:

rx-theme/assets/css/rx-table.css

Then paste the full code below.

/*!
Theme Name: RX Theme
File: assets/css/rx-table.css
Purpose: Advanced table design system for RX Theme
Author: RxHarun
Version: 1.0.0
*/

/* ==========================================================
   RX TABLE CSS INDEX
   ----------------------------------------------------------
   01. Table Design Tokens
   02. Base Table Reset
   03. WordPress Content Table Support
   04. Gutenberg Table Block Support
   05. Classic Editor Table Support
   06. RX Table Wrapper
   07. Table Caption
   08. Table Head
   09. Table Body
   10. Table Footer
   11. Table Cell Typography
   12. Table Border System
   13. Striped Tables
   14. Hover Tables
   15. Compact / Comfortable / Spacious Tables
   16. Medical Data Tables
   17. Dosage Tables
   18. Diagnostic Test Tables
   19. Lab Report Tables
   20. Comparison Tables
   21. Pricing Tables
   22. Feature Tables
   23. Responsive Scroll Tables
   24. Responsive Stacked Mobile Tables
   25. Sticky Header Tables
   26. Sticky First Column
   27. Sortable Table Visuals
   28. Status Badges Inside Tables
   29. Table Alerts / Highlight Rows
   30. Dark Mode
   31. Print Mode
   32. Accessibility
   33. Utility Classes
   ========================================================== */


/* ==========================================================
   01. Table Design Tokens
   ========================================================== */

:root {
  --rx-table-font-family: inherit;
  --rx-table-font-size: 16px;
  --rx-table-line-height: 1.65;

  --rx-table-text: #1f2937;
  --rx-table-muted-text: #64748b;
  --rx-table-heading-text: #0f172a;

  --rx-table-bg: #ffffff;
  --rx-table-bg-soft: #f8fafc;
  --rx-table-bg-muted: #f1f5f9;
  --rx-table-bg-hover: #f9fbff;
  --rx-table-bg-active: #eef6ff;

  --rx-table-border: #dbe3ef;
  --rx-table-border-strong: #cbd5e1;

  --rx-table-primary: #2563eb;
  --rx-table-primary-soft: #eff6ff;
  --rx-table-primary-border: #bfdbfe;

  --rx-table-success: #15803d;
  --rx-table-success-soft: #f0fdf4;
  --rx-table-success-border: #bbf7d0;

  --rx-table-warning: #b45309;
  --rx-table-warning-soft: #fffbeb;
  --rx-table-warning-border: #fde68a;

  --rx-table-danger: #b91c1c;
  --rx-table-danger-soft: #fef2f2;
  --rx-table-danger-border: #fecaca;

  --rx-table-info: #0369a1;
  --rx-table-info-soft: #f0f9ff;
  --rx-table-info-border: #bae6fd;

  --rx-table-radius-sm: 6px;
  --rx-table-radius-md: 10px;
  --rx-table-radius-lg: 14px;
  --rx-table-radius-xl: 18px;

  --rx-table-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --rx-table-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --rx-table-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.12);

  --rx-table-cell-padding-y: 14px;
  --rx-table-cell-padding-x: 16px;

  --rx-table-cell-padding-compact-y: 8px;
  --rx-table-cell-padding-compact-x: 10px;

  --rx-table-cell-padding-spacious-y: 18px;
  --rx-table-cell-padding-spacious-x: 22px;

  --rx-table-transition: 180ms ease;
}


/* ==========================================================
   02. Base Table Reset
   ========================================================== */

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--rx-table-font-family);
  font-size: var(--rx-table-font-size);
  line-height: var(--rx-table-line-height);
  color: var(--rx-table-text);
  background: var(--rx-table-bg);
}

table,
table * {
  box-sizing: border-box;
}

table th,
table td {
  padding: var(--rx-table-cell-padding-y) var(--rx-table-cell-padding-x);
  vertical-align: top;
  text-align: left;
  border: 1px solid var(--rx-table-border);
}

table th {
  font-weight: 700;
  color: var(--rx-table-heading-text);
  background: var(--rx-table-bg-muted);
}

table td {
  font-weight: 400;
}

table tr {
  transition:
    background-color var(--rx-table-transition),
    color var(--rx-table-transition),
    border-color var(--rx-table-transition);
}

table img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

table p {
  margin-top: 0;
  margin-bottom: 0.75em;
}

table p:last-child {
  margin-bottom: 0;
}

table ul,
table ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

table a {
  color: var(--rx-table-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

table a:hover,
table a:focus {
  text-decoration-thickness: 2px;
}

table code {
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.88em;
  background: var(--rx-table-bg-muted);
}


/* ==========================================================
   03. WordPress Content Table Support
   ========================================================== */

.entry-content table,
.post-content table,
.page-content table,
.wp-site-blocks table,
.rx-content table,
.rx-article table,
.rx-post table {
  margin: 1.75rem 0;
}

.entry-content table:first-child,
.post-content table:first-child,
.page-content table:first-child,
.rx-content table:first-child {
  margin-top: 0;
}

.entry-content table:last-child,
.post-content table:last-child,
.page-content table:last-child,
.rx-content table:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   04. Gutenberg Table Block Support
   ========================================================== */

.wp-block-table {
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table table {
  margin: 0;
}

.wp-block-table figcaption {
  margin-top: 0.75rem;
  color: var(--rx-table-muted-text);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--rx-table-bg-soft);
}

.wp-block-table.is-style-stripes {
  border-bottom: 0;
}

.wp-block-table.is-style-stripes table {
  border-collapse: collapse;
}

.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
  border-color: var(--rx-table-border);
}


/* ==========================================================
   05. Classic Editor Table Support
   ========================================================== */

.mce-content-body table,
.rx-editor-table {
  width: 100%;
  border-collapse: collapse;
}

.mce-content-body table th,
.mce-content-body table td,
.rx-editor-table th,
.rx-editor-table td {
  border: 1px solid var(--rx-table-border);
  padding: var(--rx-table-cell-padding-y) var(--rx-table-cell-padding-x);
}


/* ==========================================================
   06. RX Table Wrapper
   ========================================================== */

.rx-table-wrap,
.rx-table-wrapper,
.rx-responsive-table,
.rx-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 1.75rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rx-table-border);
  border-radius: var(--rx-table-radius-lg);
  background: var(--rx-table-bg);
  box-shadow: var(--rx-table-shadow-sm);
}

.rx-table-wrap table,
.rx-table-wrapper table,
.rx-responsive-table table,
.rx-table-scroll table {
  margin: 0;
  border: 0;
}

.rx-table-wrap th,
.rx-table-wrap td,
.rx-table-wrapper th,
.rx-table-wrapper td,
.rx-responsive-table th,
.rx-responsive-table td,
.rx-table-scroll th,
.rx-table-scroll td {
  border-left: 0;
}

.rx-table-wrap th:last-child,
.rx-table-wrap td:last-child,
.rx-table-wrapper th:last-child,
.rx-table-wrapper td:last-child,
.rx-responsive-table th:last-child,
.rx-responsive-table td:last-child,
.rx-table-scroll th:last-child,
.rx-table-scroll td:last-child {
  border-right: 0;
}

.rx-table-wrap tr:first-child th,
.rx-table-wrap tr:first-child td,
.rx-table-wrapper tr:first-child th,
.rx-table-wrapper tr:first-child td,
.rx-responsive-table tr:first-child th,
.rx-responsive-table tr:first-child td,
.rx-table-scroll tr:first-child th,
.rx-table-scroll tr:first-child td {
  border-top: 0;
}

.rx-table-wrap tr:last-child th,
.rx-table-wrap tr:last-child td,
.rx-table-wrapper tr:last-child th,
.rx-table-wrapper tr:last-child td,
.rx-responsive-table tr:last-child th,
.rx-responsive-table tr:last-child td,
.rx-table-scroll tr:last-child th,
.rx-table-scroll tr:last-child td {
  border-bottom: 0;
}


/* ==========================================================
   07. Table Caption
   ========================================================== */

table caption,
.rx-table-caption {
  caption-side: top;
  padding: 0 0 0.75rem;
  color: var(--rx-table-heading-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.rx-table-caption-center table caption,
.rx-table-caption-center .rx-table-caption {
  text-align: center;
}

.rx-table-caption-muted table caption,
.rx-table-caption-muted .rx-table-caption {
  color: var(--rx-table-muted-text);
  font-weight: 500;
}


/* ==========================================================
   08. Table Head
   ========================================================== */

table thead {
  background: var(--rx-table-bg-muted);
}

table thead th {
  position: relative;
  font-size: 0.94em;
  letter-spacing: 0.01em;
}

.rx-table-head-primary thead th {
  color: #ffffff;
  background: var(--rx-table-primary);
  border-color: rgba(255, 255, 255, 0.22);
}

.rx-table-head-soft thead th {
  color: var(--rx-table-primary);
  background: var(--rx-table-primary-soft);
  border-color: var(--rx-table-primary-border);
}

.rx-table-head-dark thead th {
  color: #ffffff;
  background: #0f172a;
  border-color: #1e293b;
}

.rx-table-head-uppercase thead th {
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.06em;
}


/* ==========================================================
   09. Table Body
   ========================================================== */

table tbody th {
  background: var(--rx-table-bg-soft);
}

table tbody td {
  background: transparent;
}

table tbody tr:hover {
  background: var(--rx-table-bg-hover);
}


/* ==========================================================
   10. Table Footer
   ========================================================== */

table tfoot {
  background: var(--rx-table-bg-muted);
}

table tfoot th,
table tfoot td {
  font-weight: 700;
  color: var(--rx-table-heading-text);
}


/* ==========================================================
   11. Table Cell Typography
   ========================================================== */

.rx-table-small {
  font-size: 0.92rem;
}

.rx-table-large {
  font-size: 1.05rem;
}

.rx-table-readable th,
.rx-table-readable td {
  line-height: 1.75;
}

.rx-table-nowrap th,
.rx-table-nowrap td {
  white-space: nowrap;
}

.rx-table-wrap-text th,
.rx-table-wrap-text td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.rx-table-center th,
.rx-table-center td {
  text-align: center;
}

.rx-table-right th,
.rx-table-right td {
  text-align: right;
}

.rx-table-middle th,
.rx-table-middle td {
  vertical-align: middle;
}

.rx-table-top th,
.rx-table-top td {
  vertical-align: top;
}

.rx-table-bottom th,
.rx-table-bottom td {
  vertical-align: bottom;
}

.rx-table-number,
.rx-table-dose,
.rx-table-price,
.rx-table-percent,
.rx-table-lab-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ==========================================================
   12. Table Border System
   ========================================================== */

.rx-table-borderless th,
.rx-table-borderless td {
  border: 0;
}

.rx-table-row-border th,
.rx-table-row-border td {
  border-left: 0;
  border-right: 0;
}

.rx-table-column-border th,
.rx-table-column-border td {
  border-top: 0;
  border-bottom: 0;
}

.rx-table-border-strong th,
.rx-table-border-strong td {
  border-color: var(--rx-table-border-strong);
}

.rx-table-rounded {
  overflow: hidden;
  border-radius: var(--rx-table-radius-lg);
}

.rx-table-rounded table {
  border-radius: var(--rx-table-radius-lg);
}

.rx-table-shadow {
  box-shadow: var(--rx-table-shadow-md);
}

.rx-table-shadow-lg {
  box-shadow: var(--rx-table-shadow-lg);
}


/* ==========================================================
   13. Striped Tables
   ========================================================== */

.rx-table-striped tbody tr:nth-child(odd) {
  background: var(--rx-table-bg-soft);
}

.rx-table-striped-even tbody tr:nth-child(even) {
  background: var(--rx-table-bg-soft);
}

.rx-table-striped-blue tbody tr:nth-child(odd) {
  background: var(--rx-table-primary-soft);
}

.rx-table-striped-green tbody tr:nth-child(odd) {
  background: var(--rx-table-success-soft);
}


/* ==========================================================
   14. Hover Tables
   ========================================================== */

.rx-table-hover tbody tr:hover {
  background: var(--rx-table-bg-hover);
}

.rx-table-hover-primary tbody tr:hover {
  background: var(--rx-table-primary-soft);
}

.rx-table-hover-lift tbody tr {
  transition:
    background-color var(--rx-table-transition),
    transform var(--rx-table-transition),
    box-shadow var(--rx-table-transition);
}

.rx-table-hover-lift tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: var(--rx-table-shadow-sm);
}


/* ==========================================================
   15. Compact / Comfortable / Spacious Tables
   ========================================================== */

.rx-table-compact th,
.rx-table-compact td {
  padding: var(--rx-table-cell-padding-compact-y) var(--rx-table-cell-padding-compact-x);
  font-size: 0.92em;
}

.rx-table-comfortable th,
.rx-table-comfortable td {
  padding: var(--rx-table-cell-padding-y) var(--rx-table-cell-padding-x);
}

.rx-table-spacious th,
.rx-table-spacious td {
  padding: var(--rx-table-cell-padding-spacious-y) var(--rx-table-cell-padding-spacious-x);
}


/* ==========================================================
   16. Medical Data Tables
   ========================================================== */

.rx-medical-table {
  border: 1px solid var(--rx-table-border);
  border-radius: var(--rx-table-radius-lg);
  overflow: hidden;
  background: var(--rx-table-bg);
}

.rx-medical-table th {
  color: #0f172a;
  background: #eef6ff;
}

.rx-medical-table td {
  color: #334155;
}

.rx-medical-table .rx-medical-term {
  font-weight: 700;
  color: var(--rx-table-heading-text);
}

.rx-medical-table .rx-medical-note {
  color: var(--rx-table-muted-text);
  font-size: 0.92em;
}

.rx-medical-table .rx-medical-warning {
  color: var(--rx-table-danger);
  font-weight: 700;
}

.rx-medical-table .rx-medical-safe {
  color: var(--rx-table-success);
  font-weight: 700;
}


/* ==========================================================
   17. Dosage Tables
   ========================================================== */

.rx-dosage-table th {
  background: var(--rx-table-primary-soft);
  color: var(--rx-table-primary);
  border-color: var(--rx-table-primary-border);
}

.rx-dosage-table .rx-dose-name {
  font-weight: 700;
  color: var(--rx-table-heading-text);
}

.rx-dosage-table .rx-dose-amount,
.rx-dosage-table .rx-dose-frequency,
.rx-dosage-table .rx-dose-duration {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-dosage-table .rx-dose-caution {
  color: var(--rx-table-danger);
  font-weight: 700;
}

.rx-dosage-table .rx-dose-note {
  color: var(--rx-table-muted-text);
  font-size: 0.92em;
}


/* ==========================================================
   18. Diagnostic Test Tables
   ========================================================== */

.rx-diagnostic-table th {
  background: #f0f9ff;
  color: var(--rx-table-info);
  border-color: var(--rx-table-info-border);
}

.rx-diagnostic-table .rx-test-name {
  font-weight: 700;
  color: var(--rx-table-heading-text);
}

.rx-diagnostic-table .rx-test-purpose {
  color: #334155;
}

.rx-diagnostic-table .rx-test-result {
  font-variant-numeric: tabular-nums;
}

.rx-diagnostic-table .rx-test-normal {
  color: var(--rx-table-success);
  font-weight: 700;
}

.rx-diagnostic-table .rx-test-abnormal {
  color: var(--rx-table-danger);
  font-weight: 700;
}


/* ==========================================================
   19. Lab Report Tables
   ========================================================== */

.rx-lab-table {
  font-size: 0.96rem;
}

.rx-lab-table th {
  background: #f8fafc;
  color: #0f172a;
}

.rx-lab-table .rx-lab-value,
.rx-lab-table .rx-lab-range,
.rx-lab-table .rx-lab-unit {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-lab-table .rx-lab-low {
  color: var(--rx-table-info);
  font-weight: 700;
}

.rx-lab-table .rx-lab-high {
  color: var(--rx-table-danger);
  font-weight: 700;
}

.rx-lab-table .rx-lab-normal {
  color: var(--rx-table-success);
  font-weight: 700;
}

.rx-lab-table .rx-lab-borderline {
  color: var(--rx-table-warning);
  font-weight: 700;
}


/* ==========================================================
   20. Comparison Tables
   ========================================================== */

.rx-comparison-table th {
  text-align: center;
}

.rx-comparison-table td:first-child,
.rx-comparison-table th:first-child {
  font-weight: 700;
  color: var(--rx-table-heading-text);
  background: var(--rx-table-bg-soft);
}

.rx-comparison-table .rx-better {
  color: var(--rx-table-success);
  font-weight: 700;
}

.rx-comparison-table .rx-worse {
  color: var(--rx-table-danger);
  font-weight: 700;
}

.rx-comparison-table .rx-neutral {
  color: var(--rx-table-muted-text);
}


/* ==========================================================
   21. Pricing Tables
   ========================================================== */

.rx-pricing-table th {
  text-align: center;
  background: var(--rx-table-primary);
  color: #ffffff;
}

.rx-pricing-table td {
  text-align: center;
}

.rx-pricing-table .rx-price {
  font-size: 1.25em;
  font-weight: 800;
  color: var(--rx-table-heading-text);
  font-variant-numeric: tabular-nums;
}

.rx-pricing-table .rx-price-muted {
  color: var(--rx-table-muted-text);
  font-size: 0.9em;
}


/* ==========================================================
   22. Feature Tables
   ========================================================== */

.rx-feature-table th {
  background: #0f172a;
  color: #ffffff;
}

.rx-feature-table .rx-feature-name {
  font-weight: 700;
  color: var(--rx-table-heading-text);
}

.rx-feature-table .rx-feature-yes {
  color: var(--rx-table-success);
  font-weight: 800;
}

.rx-feature-table .rx-feature-no {
  color: var(--rx-table-danger);
  font-weight: 800;
}

.rx-feature-table .rx-feature-partial {
  color: var(--rx-table-warning);
  font-weight: 800;
}


/* ==========================================================
   23. Responsive Scroll Tables
   ========================================================== */

.rx-table-scroll-hint {
  position: relative;
}

.rx-table-scroll-hint::after {
  content: "Swipe horizontally to view full table";
  display: none;
  margin-top: 0.5rem;
  color: var(--rx-table-muted-text);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 768px) {
  .rx-table-scroll-hint::after {
    display: block;
  }

  .entry-content table,
  .post-content table,
  .page-content table,
  .rx-content table {
    min-width: 680px;
  }

  .wp-block-table table,
  .rx-table-wrap table,
  .rx-table-wrapper table,
  .rx-responsive-table table,
  .rx-table-scroll table {
    min-width: 680px;
  }
}

@media (max-width: 480px) {
  .wp-block-table table,
  .rx-table-wrap table,
  .rx-table-wrapper table,
  .rx-responsive-table table,
  .rx-table-scroll table {
    min-width: 620px;
  }

  table th,
  table td {
    padding: 10px 12px;
    font-size: 0.94rem;
  }
}


/* ==========================================================
   24. Responsive Stacked Mobile Tables
   Usage:
   <table class="rx-table-stack">
     <tr>
       <td data-label="Medicine">...</td>
     </tr>
   </table>
   ========================================================== */

@media (max-width: 700px) {
  .rx-table-stack,
  .rx-table-stack thead,
  .rx-table-stack tbody,
  .rx-table-stack tfoot,
  .rx-table-stack th,
  .rx-table-stack td,
  .rx-table-stack tr {
    display: block;
    width: 100%;
  }

  .rx-table-stack {
    border: 0;
    background: transparent;
  }

  .rx-table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rx-table-stack tr {
    margin-bottom: 1rem;
    border: 1px solid var(--rx-table-border);
    border-radius: var(--rx-table-radius-md);
    overflow: hidden;
    background: var(--rx-table-bg);
    box-shadow: var(--rx-table-shadow-sm);
  }

  .rx-table-stack th,
  .rx-table-stack td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    border-bottom: 1px solid var(--rx-table-border);
    text-align: right;
  }

  .rx-table-stack th:last-child,
  .rx-table-stack td:last-child {
    border-bottom: 0;
  }

  .rx-table-stack td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    color: var(--rx-table-heading-text);
    font-weight: 700;
    text-align: left;
  }

  .rx-table-stack td:empty::after {
    content: "—";
    color: var(--rx-table-muted-text);
  }
}


/* ==========================================================
   25. Sticky Header Tables
   ========================================================== */

.rx-table-sticky-head {
  max-height: 70vh;
  overflow: auto;
}

.rx-table-sticky-head table thead th,
table.rx-table-sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 var(--rx-table-border);
}


/* Admin bar support when sticky table appears near top */
.admin-bar .rx-table-sticky-head table thead th,
.admin-bar table.rx-table-sticky-head thead th {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .rx-table-sticky-head table thead th,
  .admin-bar table.rx-table-sticky-head thead th {
    top: 46px;
  }
}


/* ==========================================================
   26. Sticky First Column
   ========================================================== */

.rx-table-sticky-col th:first-child,
.rx-table-sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--rx-table-bg);
  box-shadow: 1px 0 0 var(--rx-table-border);
}

.rx-table-sticky-col thead th:first-child {
  z-index: 6;
  background: var(--rx-table-bg-muted);
}

.rx-table-head-primary.rx-table-sticky-col thead th:first-child {
  background: var(--rx-table-primary);
}


/* ==========================================================
   27. Sortable Table Visuals
   ========================================================== */

.rx-table-sortable th,
.rx-sortable-table th {
  cursor: pointer;
  user-select: none;
}

.rx-table-sortable th:hover,
.rx-sortable-table th:hover {
  background-image: linear-gradient(
    0deg,
    rgba(37, 99, 235, 0.08),
    rgba(37, 99, 235, 0.08)
  );
}

.rx-table-sortable th[aria-sort="ascending"]::after,
.rx-sortable-table th[aria-sort="ascending"]::after {
  content: " ▲";
  font-size: 0.75em;
  color: var(--rx-table-primary);
}

.rx-table-sortable th[aria-sort="descending"]::after,
.rx-sortable-table th[aria-sort="descending"]::after {
  content: " ▼";
  font-size: 0.75em;
  color: var(--rx-table-primary);
}


/* ==========================================================
   28. Status Badges Inside Tables
   ========================================================== */

.rx-table-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6em;
  padding: 0.2em 0.65em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.rx-table-badge-primary {
  color: var(--rx-table-primary);
  background: var(--rx-table-primary-soft);
  border-color: var(--rx-table-primary-border);
}

.rx-table-badge-success {
  color: var(--rx-table-success);
  background: var(--rx-table-success-soft);
  border-color: var(--rx-table-success-border);
}

.rx-table-badge-warning {
  color: var(--rx-table-warning);
  background: var(--rx-table-warning-soft);
  border-color: var(--rx-table-warning-border);
}

.rx-table-badge-danger {
  color: var(--rx-table-danger);
  background: var(--rx-table-danger-soft);
  border-color: var(--rx-table-danger-border);
}

.rx-table-badge-info {
  color: var(--rx-table-info);
  background: var(--rx-table-info-soft);
  border-color: var(--rx-table-info-border);
}


/* ==========================================================
   29. Table Alerts / Highlight Rows
   ========================================================== */

.rx-row-primary,
.rx-cell-primary {
  background: var(--rx-table-primary-soft) !important;
}

.rx-row-success,
.rx-cell-success {
  background: var(--rx-table-success-soft) !important;
}

.rx-row-warning,
.rx-cell-warning {
  background: var(--rx-table-warning-soft) !important;
}

.rx-row-danger,
.rx-cell-danger {
  background: var(--rx-table-danger-soft) !important;
}

.rx-row-info,
.rx-cell-info {
  background: var(--rx-table-info-soft) !important;
}

.rx-text-primary {
  color: var(--rx-table-primary) !important;
}

.rx-text-success {
  color: var(--rx-table-success) !important;
}

.rx-text-warning {
  color: var(--rx-table-warning) !important;
}

.rx-text-danger {
  color: var(--rx-table-danger) !important;
}

.rx-text-info {
  color: var(--rx-table-info) !important;
}

.rx-text-muted {
  color: var(--rx-table-muted-text) !important;
}

.rx-text-strong {
  font-weight: 700 !important;
}


/* ==========================================================
   30. Dark Mode
   Works with:
   html[data-theme="dark"]
   body.dark-mode
   .rx-dark-mode
   ========================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --rx-table-text: #dbeafe;
    --rx-table-muted-text: #94a3b8;
    --rx-table-heading-text: #f8fafc;

    --rx-table-bg: #0f172a;
    --rx-table-bg-soft: #111827;
    --rx-table-bg-muted: #1e293b;
    --rx-table-bg-hover: #172033;
    --rx-table-bg-active: #1d2b44;

    --rx-table-border: #334155;
    --rx-table-border-strong: #475569;

    --rx-table-primary-soft: rgba(37, 99, 235, 0.16);
    --rx-table-success-soft: rgba(21, 128, 61, 0.18);
    --rx-table-warning-soft: rgba(180, 83, 9, 0.18);
    --rx-table-danger-soft: rgba(185, 28, 28, 0.18);
    --rx-table-info-soft: rgba(3, 105, 161, 0.18);
  }
}

html[data-theme="dark"],
body.dark-mode,
.rx-dark-mode {
  --rx-table-text: #dbeafe;
  --rx-table-muted-text: #94a3b8;
  --rx-table-heading-text: #f8fafc;

  --rx-table-bg: #0f172a;
  --rx-table-bg-soft: #111827;
  --rx-table-bg-muted: #1e293b;
  --rx-table-bg-hover: #172033;
  --rx-table-bg-active: #1d2b44;

  --rx-table-border: #334155;
  --rx-table-border-strong: #475569;

  --rx-table-primary-soft: rgba(37, 99, 235, 0.16);
  --rx-table-success-soft: rgba(21, 128, 61, 0.18);
  --rx-table-warning-soft: rgba(180, 83, 9, 0.18);
  --rx-table-danger-soft: rgba(185, 28, 28, 0.18);
  --rx-table-info-soft: rgba(3, 105, 161, 0.18);
}

html[data-theme="dark"] table code,
body.dark-mode table code,
.rx-dark-mode table code {
  color: #e2e8f0;
  background: #1e293b;
}


/* ==========================================================
   31. Print Mode
   ========================================================== */

@media print {
  table {
    color: #000000 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    page-break-inside: auto;
  }

  table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  table th,
  table td {
    color: #000000 !important;
    background: #ffffff !important;
    border-color: #999999 !important;
    box-shadow: none !important;
  }

  table thead {
    display: table-header-group;
  }

  table tfoot {
    display: table-footer-group;
  }

  .rx-table-wrap,
  .rx-table-wrapper,
  .rx-responsive-table,
  .rx-table-scroll {
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .rx-table-scroll-hint::after {
    display: none !important;
  }

  .rx-table-badge {
    color: #000000 !important;
    background: #ffffff !important;
    border-color: #999999 !important;
  }
}


/* ==========================================================
   32. Accessibility
   ========================================================== */

table th[scope="col"],
table th[scope="row"] {
  font-weight: 700;
}

table:focus,
.rx-table-wrap:focus,
.rx-table-wrapper:focus,
.rx-responsive-table:focus,
.rx-table-scroll:focus {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  table tr,
  .rx-table-hover-lift tbody tr {
    transition: none;
  }

  .rx-table-hover-lift tbody tr:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  table,
  table th,
  table td,
  .rx-table-wrap,
  .rx-table-wrapper,
  .rx-responsive-table,
  .rx-table-scroll {
    border-color: CanvasText;
  }

  table th {
    background: Canvas;
    color: CanvasText;
  }
}


/* ==========================================================
   33. Utility Classes
   ========================================================== */

.rx-table-full {
  width: 100% !important;
}

.rx-table-auto {
  width: auto !important;
}

.rx-table-fixed {
  table-layout: fixed;
}

.rx-table-min-600 {
  min-width: 600px;
}

.rx-table-min-700 {
  min-width: 700px;
}

.rx-table-min-800 {
  min-width: 800px;
}

.rx-table-min-900 {
  min-width: 900px;
}

.rx-table-min-1000 {
  min-width: 1000px;
}

.rx-cell-w-10 {
  width: 10%;
}

.rx-cell-w-15 {
  width: 15%;
}

.rx-cell-w-20 {
  width: 20%;
}

.rx-cell-w-25 {
  width: 25%;
}

.rx-cell-w-30 {
  width: 30%;
}

.rx-cell-w-33 {
  width: 33.333%;
}

.rx-cell-w-40 {
  width: 40%;
}

.rx-cell-w-50 {
  width: 50%;
}

.rx-cell-w-60 {
  width: 60%;
}

.rx-cell-w-70 {
  width: 70%;
}

.rx-cell-w-80 {
  width: 80%;
}

.rx-cell-w-90 {
  width: 90%;
}

.rx-cell-w-100 {
  width: 100%;
}

.rx-cell-center {
  text-align: center !important;
}

.rx-cell-left {
  text-align: left !important;
}

.rx-cell-right {
  text-align: right !important;
}

.rx-cell-middle {
  vertical-align: middle !important;
}

.rx-cell-top {
  vertical-align: top !important;
}

.rx-cell-bottom {
  vertical-align: bottom !important;
}

.rx-cell-nowrap {
  white-space: nowrap !important;
}

.rx-cell-break {
  overflow-wrap: anywhere !important;
}

.rx-cell-muted {
  color: var(--rx-table-muted-text) !important;
}

.rx-cell-bold {
  font-weight: 700 !important;
}

.rx-cell-small {
  font-size: 0.88em !important;
}

.rx-cell-large {
  font-size: 1.08em !important;
}

.rx-table-no-margin {
  margin: 0 !important;
}

.rx-table-margin-sm {
  margin: 1rem 0 !important;
}

.rx-table-margin-md {
  margin: 1.75rem 0 !important;
}

.rx-table-margin-lg {
  margin: 2.5rem 0 !important;
}


/* ==========================================================
   Recommended HTML Examples
   ----------------------------------------------------------
   Scroll table:
   <div class="rx-table-wrap rx-table-scroll-hint">
     <table class="rx-medical-table rx-table-striped rx-table-hover">
       ...
     </table>
   </div>

   Mobile stacked table:
   <table class="rx-table-stack">
     <thead>
       <tr>
         <th>Drug</th>
         <th>Dose</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td data-label="Drug">Paracetamol</td>
         <td data-label="Dose">500 mg</td>
       </tr>
     </tbody>
   </table>
   ========================================================== */

Then enqueue it in your theme.

wp_enqueue_style(
    'rx-table',
    get_template_directory_uri() . '/assets/css/rx-table.css',
    array(),
    wp_get_theme()->get( 'Version' )
);

Best placement:

rx-theme/
└── assets/
    └── css/
        └── rx-table.css

Use this wrapper for most article tables:

<div class="rx-table-wrap rx-table-scroll-hint">
  <table class="rx-medical-table rx-table-striped rx-table-hover">
    ...
  </table>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *