Open demo

CSS code

HTML 
<div class="wk">
  <h2 class="wk-title" id="wk-title">Week at a glance</h2>
  <div class="wk-scroll" tabindex="0" role="region" aria-labelledby="wk-title">
    <table class="wk-grid" aria-labelledby="wk-title">
      <thead><tr>
        <th scope="col"><span class="sr-only">Time</span></th>
        <th scope="col"><span aria-hidden="true">Mon<b>14</b></span><span class="sr-only">Monday 14 September 2026</span></th>
        <th scope="col"><span aria-hidden="true">Tue<b>15</b></span><span class="sr-only">Tuesday 15 September 2026</span></th>
        <th scope="col"><span aria-hidden="true">Wed<b>16</b></span><span class="sr-only">Wednesday 16 September 2026</span></th>
        <th scope="col"><span aria-hidden="true">Thu<b>17</b></span><span class="sr-only">Thursday 17 September 2026</span></th>
        <th scope="col"><span aria-hidden="true">Fri<b>18</b></span><span class="sr-only">Friday 18 September 2026</span></th>
      </tr></thead>
      <tbody>
        <tr><th scope="row">9:00</th>
          <td><div class="wk-ev v1">Standup<span>Whole team</span></div></td>
          <td><div class="wk-ev v1">Standup<span>Whole team</span></div></td>
          <td><div class="wk-ev v1">Standup<span>Whole team</span></div></td>
          <td><div class="wk-ev v1">Standup<span>Whole team</span></div></td>
          <td><div class="wk-ev v1">Standup<span>Whole team</span></div></td></tr>
        <tr><th scope="row">10:00</th>
          <td></td>
          <td rowspan="2"><div class="wk-ev v2">Design review<span>10:00 – 12:00 · Studio</span></div></td>
          <td></td>
          <td><div class="wk-ev v4">1:1 with Sam<span>Growth</span></div></td>
          <td></td></tr>
        <tr><th scope="row">11:00</th>
          <td><div class="wk-ev v3">Customer call<span>Arcadia Labs</span></div></td>
          <td><div class="wk-ev v2">Sprint planning<span>Eng + PM</span></div></td>
          <td></td>
          <td></td></tr>
        <tr><th scope="row">12:00</th>
          <td></td><td></td><td></td><td></td>
          <td><div class="wk-ev v4">Team lunch<span>Verde, 12:30</span></div></td></tr>
        <tr><th scope="row">13:00</th>
          <td></td>
          <td><div class="wk-ev v3">Roadmap sync<span>Leads</span></div></td>
          <td></td><td></td>
          <td><div class="wk-ev v1">Demo Friday<span>All hands</span></div></td></tr>
      </tbody>
    </table>
  </div>
</div>
CSS 
/* Week schedule: a <table> with days as column headers and hours as row headers.
   An event that runs two hours is one cell with rowspan="2". No JavaScript. */
.wk{position:relative;width:100%;max-width:840px;background:#fff;border:1px solid #e7eaf0;border-radius:16px;padding:22px;
  color:#1c2430;box-shadow:0 16px 36px -22px rgba(22,30,50,.18)}
.wk-title{font-size:1.05rem;margin-bottom:16px}
/* on narrow screens the week scrolls sideways inside this region */
.wk-scroll{position:relative;overflow-x:auto}
.wk-scroll:focus-visible{outline:2px solid #2b47bd;outline-offset:2px;border-radius:6px}
.wk-grid{width:100%;min-width:600px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.wk-grid thead th{font-size:.72rem;font-weight:800;text-align:center;color:#66718a;padding:6px 0;text-transform:uppercase;letter-spacing:.05em}
.wk-grid thead th b{display:block;font-size:1rem;color:#1c2430;letter-spacing:0}
.wk-grid thead th:first-child{width:52px}
.wk-grid tbody th{font-size:.66rem;font-weight:400;color:#64748b;text-align:right;vertical-align:top;padding:2px 8px 0 0;
  font-variant-numeric:tabular-nums}
.wk-grid td{height:44px;padding:0;vertical-align:top;border-top:1px dashed #edf0f5}
.wk-ev{border-radius:9px;padding:7px 10px;font-size:.72rem;font-weight:700;line-height:1.3;overflow:hidden;border-left:3px solid}
.wk-grid td[rowspan="2"] .wk-ev{min-height:92px}
.wk-ev span{display:block;font-weight:500;font-size:.66rem}
.v1{background:#e6edff;color:#2b47bd}
.v2{background:#e4f7ec;color:#157347}
.v3{background:#fdeff3;color:#bb2560}
.v4{background:#fdf4e2;color:#96660d}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="card wk w-100">
  <div class="card-body">
    <h2 class="wk-title fw-bold mb-3" id="wk-title">Week at a glance</h2>
    <div class="table-responsive" tabindex="0" role="region" aria-labelledby="wk-title">
      <table class="table table-borderless wk-grid mb-0" aria-labelledby="wk-title">
        <thead><tr>
          <th scope="col"><span class="visually-hidden">Time</span></th>
          <th scope="col"><span aria-hidden="true">Mon<b>14</b></span><span class="visually-hidden">Monday 14 September 2026</span></th>
          <th scope="col"><span aria-hidden="true">Tue<b>15</b></span><span class="visually-hidden">Tuesday 15 September 2026</span></th>
          <th scope="col"><span aria-hidden="true">Wed<b>16</b></span><span class="visually-hidden">Wednesday 16 September 2026</span></th>
          <th scope="col"><span aria-hidden="true">Thu<b>17</b></span><span class="visually-hidden">Thursday 17 September 2026</span></th>
          <th scope="col"><span aria-hidden="true">Fri<b>18</b></span><span class="visually-hidden">Friday 18 September 2026</span></th>
        </tr></thead>
        <tbody>
          <tr><th scope="row">9:00</th>
            <td><div class="wk-ev fw-bold bg-primary-subtle text-primary-emphasis">Standup<span class="fw-medium">Whole team</span></div></td>
            <td><div class="wk-ev fw-bold bg-primary-subtle text-primary-emphasis">Standup<span class="fw-medium">Whole team</span></div></td>
            <td><div class="wk-ev fw-bold bg-primary-subtle text-primary-emphasis">Standup<span class="fw-medium">Whole team</span></div></td>
            <td><div class="wk-ev fw-bold bg-primary-subtle text-primary-emphasis">Standup<span class="fw-medium">Whole team</span></div></td>
            <td><div class="wk-ev fw-bold bg-primary-subtle text-primary-emphasis">Standup<span class="fw-medium">Whole team</span></div></td></tr>
          <tr><th scope="row">10:00</th>
            <td></td>
            <td rowspan="2"><div class="wk-ev fw-bold bg-success-subtle text-success-emphasis">Design review<span class="fw-medium">10:00 – 12:00 · Studio</span></div></td>
            <td></td>
            <td><div class="wk-ev fw-bold bg-warning-subtle text-warning-emphasis">1:1 with Sam<span class="fw-medium">Growth</span></div></td>
            <td></td></tr>
          <tr><th scope="row">11:00</th>
            <td><div class="wk-ev fw-bold bg-danger-subtle text-danger-emphasis">Customer call<span class="fw-medium">Arcadia Labs</span></div></td>
            <td><div class="wk-ev fw-bold bg-success-subtle text-success-emphasis">Sprint planning<span class="fw-medium">Eng + PM</span></div></td>
            <td></td>
            <td></td></tr>
          <tr><th scope="row">12:00</th>
            <td></td><td></td><td></td><td></td>
            <td><div class="wk-ev fw-bold bg-warning-subtle text-warning-emphasis">Team lunch<span class="fw-medium">Verde, 12:30</span></div></td></tr>
          <tr><th scope="row">13:00</th>
            <td></td>
            <td><div class="wk-ev fw-bold bg-danger-subtle text-danger-emphasis">Roadmap sync<span class="fw-medium">Leads</span></div></td>
            <td></td><td></td>
            <td><div class="wk-ev fw-bold bg-primary-subtle text-primary-emphasis">Demo Friday<span class="fw-medium">All hands</span></div></td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
CSS 
/* Bootstrap .card + borderless .table in .table-responsive. Event tones reuse Bootstrap's *-bg-subtle / *-text-emphasis
   variables, recoloured here. A two-hour event is one cell with rowspan="2". */
.wk{--bs-card-border-color:#e7eaf0;--bs-card-border-radius:16px;--bs-card-spacer-x:22px;--bs-card-spacer-y:22px;--bs-card-color:#1c2430;
  --bs-primary-bg-subtle:#e6edff;--bs-primary-text-emphasis:#2b47bd;--bs-success-bg-subtle:#e4f7ec;--bs-success-text-emphasis:#157347;
  --bs-danger-bg-subtle:#fdeff3;--bs-danger-text-emphasis:#bb2560;--bs-warning-bg-subtle:#fdf4e2;--bs-warning-text-emphasis:#96660d;
  max-width:840px;box-shadow:0 16px 36px -22px rgba(22,30,50,.18)}
.wk-title{font-size:1.05rem;line-height:normal}
.wk .table-responsive{position:relative}
.wk .table-responsive:focus-visible{outline:2px solid #2b47bd;outline-offset:2px;border-radius:6px}
.wk-grid{--bs-table-bg:transparent;--bs-table-color:#1c2430;min-width:600px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.wk-grid>:not(caption)>*>*{padding:0}
.wk-grid thead th{font-size:.72rem;font-weight:800;text-align:center;color:#66718a;padding:6px 0;text-transform:uppercase;letter-spacing:.05em}
.wk-grid thead th b{display:block;font-size:1rem;color:#1c2430;letter-spacing:0}
.wk-grid thead th:first-child{width:52px}
.wk-grid tbody th{font-size:.66rem;font-weight:400;color:#64748b;text-align:right;vertical-align:top;padding:2px 8px 0 0;
  font-variant-numeric:tabular-nums}
.wk-grid td{height:44px;vertical-align:top;border-top:1px dashed #edf0f5}
.wk-ev{border-radius:9px;padding:7px 10px;font-size:.72rem;line-height:1.3;border-left:3px solid currentColor}
.wk-grid td[rowspan="2"] .wk-ev{min-height:92px}
.wk-ev span{display:block;font-size:.66rem}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="relative w-full max-w-[840px] rounded-2xl border border-[#e7eaf0] bg-white p-[22px] text-[#1c2430] shadow-[0_16px_36px_-22px_rgba(22,30,50,.18)]">
  <h2 class="mb-4 text-[1.05rem] font-bold" id="wk-title">Week at a glance</h2>
  <div class="relative overflow-x-auto rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-wk-blue" tabindex="0" role="region" aria-labelledby="wk-title">
    <table class="w-full min-w-[600px] table-fixed border-separate border-spacing-1" aria-labelledby="wk-title">
      <thead class="text-center text-[.72rem] font-extrabold tracking-[.05em] text-[#66718a] uppercase"><tr>
        <th scope="col" class="w-[52px]"><span class="sr-only">Time</span></th>
        <th scope="col" class="py-1.5"><span aria-hidden="true">Mon<b class="block text-[1rem] tracking-normal text-[#1c2430]">14</b></span><span class="sr-only">Monday 14 September 2026</span></th>
        <th scope="col" class="py-1.5"><span aria-hidden="true">Tue<b class="block text-[1rem] tracking-normal text-[#1c2430]">15</b></span><span class="sr-only">Tuesday 15 September 2026</span></th>
        <th scope="col" class="py-1.5"><span aria-hidden="true">Wed<b class="block text-[1rem] tracking-normal text-[#1c2430]">16</b></span><span class="sr-only">Wednesday 16 September 2026</span></th>
        <th scope="col" class="py-1.5"><span aria-hidden="true">Thu<b class="block text-[1rem] tracking-normal text-[#1c2430]">17</b></span><span class="sr-only">Thursday 17 September 2026</span></th>
        <th scope="col" class="py-1.5"><span aria-hidden="true">Fri<b class="block text-[1rem] tracking-normal text-[#1c2430]">18</b></span><span class="sr-only">Friday 18 September 2026</span></th>
      </tr></thead>
      <tbody class="[&_td]:h-11 [&_td]:border-t [&_td]:border-dashed [&_td]:border-[#edf0f5] [&_td]:align-top [&_th]:pt-0.5 [&_th]:pr-2 [&_th]:text-right [&_th]:align-top [&_th]:text-[.66rem] [&_th]:font-normal [&_th]:text-[#64748b] [&_th]:tabular-nums">
        <tr><th scope="row">9:00</th>
          <td><div class="rounded-[9px] border-l-3 border-wk-blue bg-wk-blue-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-blue">Standup<span class="block text-[.66rem] font-medium">Whole team</span></div></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-blue bg-wk-blue-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-blue">Standup<span class="block text-[.66rem] font-medium">Whole team</span></div></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-blue bg-wk-blue-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-blue">Standup<span class="block text-[.66rem] font-medium">Whole team</span></div></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-blue bg-wk-blue-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-blue">Standup<span class="block text-[.66rem] font-medium">Whole team</span></div></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-blue bg-wk-blue-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-blue">Standup<span class="block text-[.66rem] font-medium">Whole team</span></div></td></tr>
        <tr><th scope="row">10:00</th>
          <td></td>
          <td rowspan="2"><div class="min-h-[92px] rounded-[9px] border-l-3 border-wk-green bg-wk-green-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-green">Design review<span class="block text-[.66rem] font-medium">10:00 – 12:00 · Studio</span></div></td>
          <td></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-amber bg-wk-amber-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-amber">1:1 with Sam<span class="block text-[.66rem] font-medium">Growth</span></div></td>
          <td></td></tr>
        <tr><th scope="row">11:00</th>
          <td><div class="rounded-[9px] border-l-3 border-wk-pink bg-wk-pink-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-pink">Customer call<span class="block text-[.66rem] font-medium">Arcadia Labs</span></div></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-green bg-wk-green-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-green">Sprint planning<span class="block text-[.66rem] font-medium">Eng + PM</span></div></td>
          <td></td>
          <td></td></tr>
        <tr><th scope="row">12:00</th>
          <td></td><td></td><td></td><td></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-amber bg-wk-amber-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-amber">Team lunch<span class="block text-[.66rem] font-medium">Verde, 12:30</span></div></td></tr>
        <tr><th scope="row">13:00</th>
          <td></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-pink bg-wk-pink-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-pink">Roadmap sync<span class="block text-[.66rem] font-medium">Leads</span></div></td>
          <td></td><td></td>
          <td><div class="rounded-[9px] border-l-3 border-wk-blue bg-wk-blue-bg px-2.5 py-[7px] text-[.72rem] leading-[1.3] font-bold text-wk-blue">Demo Friday<span class="block text-[.66rem] font-medium">All hands</span></div></td></tr>
      </tbody>
    </table>
  </div>
</div>
CSS 
@theme {
  --color-wk-blue: #2b47bd;
  --color-wk-blue-bg: #e6edff;
  --color-wk-green: #157347;
  --color-wk-green-bg: #e4f7ec;
  --color-wk-pink: #bb2560;
  --color-wk-pink-bg: #fdeff3;
  --color-wk-amber: #96660d;
  --color-wk-amber-bg: #fdf4e2;
}

About this set

A Monday-to-Friday time grid for team schedules, class timetables and room planners. Days run across the top with a small uppercase weekday over a large date number, hours run down the left from 9:00 to 13:00, and events sit in tinted blocks with a coloured left rule, a bold title and a lighter detail line such as the location or attendees. Four tones (blue, green, pink and amber) separate meeting types. A two-hour event, the Tuesday design review, is a single cell with rowspan=”2″ that fills both hour slots, which is the cleanest way to express spanning events in a table without absolute positioning. Empty slots keep a dashed top rule so the hour lines stay readable. There is no JavaScript: the whole schedule is static markup you can generate on the server or edit by hand. On screens narrower than about 650 pixels the table keeps its minimum width and scrolls sideways inside a labelled region that keyboard users can focus and scroll with the arrow keys. The Bootstrap version uses .card, a borderless .table inside .table-responsive and Bootstrap’s subtle colour variables; the Tailwind version uses four pairs of theme colours.

What’s included

  • Five-day by hourly table with day and time headers
  • Two-hour events as one cell with rowspan
  • Four event tones with a coloured left rule
  • No JavaScript, static markup
  • Horizontal scroll region on narrow screens

Accessibility

Days are column headers and times are row headers, so a screen reader announces each event with its day and hour. Day headers carry the full date as hidden text ("Monday 14 September 2026"). The scroll region has tabindex="0", is labelled by the heading and shows a focus outline. Time labels were darkened and the detail line's opacity removed so all text reaches 4.5:1.

Customise it

Change the .v1 to .v4 background and text colours, the 44px row height on td and the 600px minimum table width. In Bootstrap the tones are the --bs-primary/success/danger/warning-bg-subtle and -text-emphasis variables set on .wk; in Tailwind edit the --color-wk-* theme colours.