Nothing fancy, just the standard HTML <table>.

Nordic Countries Overview

Country	Major Cities			Nature
	Capital	2nd Largest	3rd Largest	National Animal	National Bird
Norway	Oslo	Bergen	Trondheim	Elk	White-throated Dipper
Sweden	Stockholm	Göteborg	Malmö	Elk	Common Blackbird
Denmark	København	Aarhus	Odense	Mute Swan	Mute Swan
Finland	Helsinki	Espoo	Tampere	Brown Bear	Whooper Swan
Iceland	Reykjavík	Kópavogur	Hafnarfjörður	Gyrfalcon	Gyrfalcon
Scandinavia != The Nordics

Dense

CSS Units Dating Profile

Unit	Personality	Dating Status
px	Fixed mindset, refuses to change	In a committed relationship with legacy code
rem	Flexible, but dependent on parents	Popular in the modern dating scene
vw	Goes with the flow, sometimes too much	In an open relationship with responsive design
ch	Typography nerd	Looking for meaningful connections
Swipe right for responsive design!

<table class="dense">
  <!--  -->
</table>

Sticky header

When applying sticky header...

If you inspect the page you can see that I cheated a bit with the inset-block-start value. That's because these docs already have sticky elements. But you get the point - you might have to do the same.

Most Controversial CSS Properties of All Time

Property	Drama Level	Famous Battles
!important	Nuclear ☢️	The Great Specificity Wars of 2012
z-index	Astronomical 🌌	"Why is my modal behind everything?!"
float	Legacy Nightmare 👻	The Pre-Flexbox Dark Ages
box-sizing	Mathematical Chaos 🧮	Border-box Revolution of 2011
Yes I had AI generate the cringy table contents. I chuckled a little though.

<table class="sticky-header">
  <!--  -->
</table>

API

Type	Modifiers	Default	Description
Dense	.dense	-	When applied the table will appear denser.
Sticky header	.sticky-header	-	When applied the table's <thead> will be sticky.

Browser compatibility

Installation

table.css

@layer components.base {
  :where(table) {
    border-collapse: collapse;
    display: block;
    margin: var(--size-3) 0;
    max-inline-size: 100%;
    position: relative;

    /* Rows */
    tr {
      background-color: var(--surface-default);
      border-top: 1px solid var(--border-color);

      &:hover {
        background-color: oklch(from var(--surface-filled) l c h / 75%);
      }
    }

    /* Cells */
    th,
    td {
      border: 1px solid var(--border-color);
      padding: var(--size-1) var(--size-2);
    }

    th {
      background-color: var(--surface-filled);
      color: var(--text-color-1);
      font-size: var(--font-size-sm, 0.75rem);
      font-weight: 600;
      text-align: start;
    }

    td {
      font-size: var(--font-size-sm, 0.75rem);
    }

    /* Caption */
    caption {
      caption-side: bottom;
      color: var(--text-color-2);
      font-size: var(--font-size-sm, 0.75rem);
      padding: var(--size-2) 0;
      text-align: start;
    }

    /* Header */
    thead {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    /* Footer */
    tfoot {
      border-top: 2px solid var(--border-color);

      tr {
        background-color: var(--surface-filled);
      }

      td {
        color: var(--text-color-1);
        font-weight: 600;
      }
    }

    /* Column group */
    colgroup col {
      border: none;
    }

    @container (width < 60ch) {
      th,
      td {
        padding: var(--size-1) 0.875rem;
      }
    }

    /* Sticky header */
    &.sticky-header thead {
      background-color: var(--surface-filled);
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
    }

    /* Dense */
    &.dense {
      th,
      td {
        padding: var(--size-1) var(--size-2);
      }

      caption {
        padding: var(--size-1) 0;
      }

      @container (width < 60ch) {
        th,
        td {
          padding: var(--size-1) var(--size-2);
        }
      }
    }
  }
}