peter
696cfe7d65
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>
45 lines
954 B
CSS
45 lines
954 B
CSS
body.artifact {
|
|
box-sizing: border-box;
|
|
color: #1d2528;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
line-height: 1.65;
|
|
margin: 0 auto;
|
|
max-width: 900px;
|
|
padding: 3rem 1.25rem;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
pre {
|
|
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);
|
|
}
|