Table blades

Table of Contents

Responsive table without wrapper

<table class="responsive"> allows a table to full-bleed and scroll on mobile:

Term Description
Link
Responsive design Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. /wiki/Responsive_web_design

Tables inside .breakout[-all] are responsive by default.

How it works
table.responsive,
.breakout > table:not(.does-not-exist),
.breakout-all > table:not(.does-not-exist) {
  /* Center horizontally */
  margin-left: 50%;
  transform: translateX(-50%);

  /* Let them full-bleed */
  width: max-content;
  min-width: auto;
  max-width: 100vw;
  padding-inline: 7.5%;

  /* Let them scroll */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */

  th,
  td {
    padding-inline-start: 0;
  }
}

Soft-increase selector specificity trick:

table:not(.does-not-exist) (inspired by postcss) is used here to increase specificity against selectors like &:is(table, .table)

Extends /picocss/pico/blob/main/scss/content/_table.scss

Horizontal expanders

Simply insert <hr> inside <th> to forcibly widen too narrow columns (especially useful in markdown):

<th>Col <hr></th>

Example table:

SSG
Description
Build Awesome Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance.

Same table without <hr>-expander would render as:

SSG Description
Build Awesome Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance.
How it works 
table {
  th {
    hr {
      width: 12ch; /* min ~65/12 = ~5 cols */
      height: 0;
      margin: 0;
      visibility: hidden;

      &.x2 {
        width: 24ch;
      }
    }
  }
}

Borderless table

<table class="borderless"> removes all default borders:

Less Borders
More Fun

Living example: /#minimal-dependencies table