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>

API

Type	Modifiers	Default	Description
Dense	.dense	-	When applied the table will appear denser.

Browser compatibility

Installation

table.css

@layer components.root {
  :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;
    }

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

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