Table Rendering Showcase
Small, medium, and deliberately wide tables for desktop and mobile layout checks.
Small Table
| Feature | Status | Notes |
|---|---|---|
| Typography | Ready | Uses real prose |
| Taxonomy | Ready | Shared terms are intentional |
| Pagination | Ready | Six cards per page |
Medium Table
The medium table has enough columns to test a normal desktop layout without becoming an artificial spreadsheet.
| Component | Owner | Input | Output | Mobile behavior | Review date | Risk |
|---|---|---|---|---|---|---|
| Article card | Theme | Front matter | Linked preview | Stack content | 2026-08-21 | Low |
| TOC | Browser | Headings | Anchored links | Collapse or scroll | 2026-08-22 | Medium |
| Code block | Goldmark | Fence language | Highlighted code | Local scroll | 2026-08-23 | Medium |
| Taxonomy | Hugo | Tags and categories | Term pages | Wrap links | 2026-08-24 | Low |
| RSS | Hugo | Published pages | XML feed | N/A | 2026-08-25 | Low |
Wide Table
This table intentionally has twelve columns. On a small viewport, the table itself may scroll horizontally, but it should not push the entire page beyond the viewport.
| ID | Feature | Type | Status | Owner | Version | Browser | Width | Height | Date | Score | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| A-01 | Reading column | layout | pass | theme | 1.0 | Safari | 720px | auto | 2026-08-21 | 98 | max-width is intentional |
| A-02 | Sticky TOC | navigation | inspect | theme | 1.0 | Chrome | 240px | 80vh | 2026-08-22 | 91 | long-form article |
| A-03 | Code overflow | content | pass | Hugo | 0.165 | Firefox | 100% | auto | 2026-08-23 | 96 | Preserve long lines |
| A-04 | Taxonomy links | content | pass | Hugo | 0.165 | Mobile Safari | auto | auto | 2026-08-24 | 94 | Multiple terms |
| A-05 | CJK wrapping | typography | inspect | theme | 1.0 | Chrome | 100% | auto | 2026-08-25 | 89 | 中文English混排 |
| A-06 | Image ratio | media | pass | theme | 1.0 | Safari | 1200px | 675px | 2026-08-26 | 97 | local SVG |
| A-07 | Pagination | navigation | pass | Hugo | 0.165 | Firefox | auto | auto | 2026-08-27 | 95 | page 2 exists |
| A-08 | Long cell | content | inspect | author | 1.0 | Edge | 420px | auto | 2026-08-28 | 87 | This cell contains long text that should wrap inside the table without forcing the outer document to become wider than the viewport. |
| A-09 | Currency | data | pass | author | 1.0 | Chrome | auto | auto | 2026-08-29 | 100 | $1,234.56 |
| A-10 | Timestamp | data | pass | author | 1.0 | Safari | auto | auto | 2026-08-30 | 100 | 14:30:00 +08:00 |
| A-11 | External link | content | pass | author | 1.0 | Chrome | auto | auto | 2026-08-30 | 92 | https://example.com/a-very-long-path-for-table-link-wrapping |
| A-12 | Empty value | edge | inspect | author | 1.0 | Firefox | auto | auto | 2026-08-30 | 90 | — |
Long Cells and Inline Content
Tables often contain more than plain nouns. A cell can contain a link to the code page, an inline token, a long sentence, a date such as 2026-08-30, or a number such as 3.1415926. The correct response is local wrapping or local scrolling—not a broken reading surface.