peter/daybook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style tables in markdown/html_fragment content

Browse source 
Markdown pipe-tables and hand-written html_fragment <table> markup already
rendered - the only existing rule was 'max-width: 100%', so they came out
as bare, unbordered browser-default tables. Adds borders, header
background, cell padding, and zebra striping, plus a display:block +
overflow-x:auto pattern so wide tables scroll horizontally instead of
squeezing columns or breaking page layout.

Lives in base.css, which report.css and tasks.css both @import, so it
applies to every existing and future markdown/html_fragment artifact
immediately - no agent-side change needed, since this is rendered live
from CSS rather than baked into stored HTML.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
peter 2026-09-02 15:01:26 +01:00
parent e5d2f192df
commit 696cfe7d65
1 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
static/themes/base.css
View file

@ -8,11 +8,38 @@ body.artifact {
padding: 3rem 1.25rem; padding: 3rem 1.25rem;
} }
img, img {
table {
max-width: 100%; max-width: 100%;
} }
pre { pre {
overflow-x: auto; overflow-x: auto;
} }
/* Applies to any <table> in markdown (pipe-table syntax) or hand-written
html_fragment content. display:block + overflow-x lets wide tables scroll
horizontally instead of squeezing columns or breaking page layout, while
descendant tr/td/th keep their normal table layout internally. */
table {
border-collapse: collapse;
display: block;
max-width: 100%;
overflow-x: auto;
width: max-content;
}
th,
td {
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 0.45rem 0.75rem;
text-align: left;
}
thead th {
background: rgba(0, 0, 0, 0.05);
font-weight: 600;
}
tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.025);
}