← Files Scientific Visuals & TablesARCHIVED FILE

skills/scientific-visual-table-style/templates/openai_table.css

2.37 KB · Oct 2, 2026 · 00:32 UTC

↓ Download file

/* OpenAI-inspired quantitative table styling.
   Operational template only; not an official OpenAI stylesheet. */

:root {
  --oa-ink: #111111;
  --oa-ink-secondary: #404040;
  --oa-muted: #6f6f6f;
  --oa-rule: #d8d8d4;
  --oa-subtle: #f5f5f2;
  --oa-accent: #1f6f5f;
  --oa-accent-tint: #dde9e5;
  --oa-canvas: #ffffff;
}

.oa-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  background: var(--oa-canvas);
}

.oa-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--oa-ink);
  background: var(--oa-canvas);
  font-family: Arial, Helvetica, Inter, "Liberation Sans", "DejaVu Sans", sans-serif;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.34;
}

.oa-table caption {
  margin: 0 0 0.65rem;
  color: var(--oa-ink);
  font-weight: 600;
  text-align: left;
}

.oa-table thead {
  border-top: 1.25px solid var(--oa-ink);
  border-bottom: 1px solid var(--oa-ink-secondary);
}

.oa-table th,
.oa-table td {
  padding: 0.52rem 0.62rem;
  border: 0;
  vertical-align: top;
}

.oa-table th {
  color: var(--oa-ink);
  font-weight: 600;
  text-align: left;
  white-space: normal;
}

.oa-table td.numeric,
.oa-table th.numeric {
  text-align: right;
  white-space: nowrap;
}

.oa-table tbody tr.group-row th,
.oa-table tbody tr.group-row td {
  padding-top: 0.8rem;
  padding-bottom: 0.32rem;
  border-top: 1px solid var(--oa-rule);
  color: var(--oa-ink);
  font-weight: 600;
}

.oa-table tbody tr:first-child.group-row th,
.oa-table tbody tr:first-child.group-row td {
  border-top: 0;
}

.oa-table tbody tr:last-child {
  border-bottom: 1.25px solid var(--oa-ink);
}

.oa-table .focal {
  color: var(--oa-ink);
  font-weight: 600;
}

.oa-table .focal-column {
  background: color-mix(in srgb, var(--oa-accent-tint) 45%, white);
}

.oa-table .muted {
  color: var(--oa-muted);
}

.oa-table .delta {
  color: var(--oa-muted);
  font-size: 0.93em;
}

.oa-table .missing {
  color: var(--oa-muted);
}

.oa-table-note {
  margin-top: 0.55rem;
  max-width: 90ch;
  color: var(--oa-muted);
  font-family: Arial, Helvetica, Inter, "Liberation Sans", "DejaVu Sans", sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .oa-table {
    min-width: 680px;
  }
}

@media print {
  .oa-table-wrap {
    overflow: visible;
  }

  .oa-table {
    font-size: 8.5pt;
  }

  .oa-table .focal-column {
    background: transparent;
  }
}

SHA-256: 2c71b61e3351b9a5ead5578466bb0c1cf6342b4ae6db1638acb12302ef53060e