1
0
mirror of synced 2026-01-03 06:04:16 -05:00
Files
docs/components/ui/MarkdownContent/stylesheets/table.scss
2021-11-19 21:06:45 +00:00

83 lines
1.7 KiB
SCSS

.markdownBody {
table {
display: table;
border-collapse: collapse;
position: relative;
font-size: 90%;
width: 100%;
line-height: 1.5;
/* We want to keep table-layout: auto so that column widths dynamically adjust;
otherwise entries get needlessly squashed into narrow columns. As a workaround,
we use components/lib/wrap-code-terms.js to prevent some reference table content
from expanding beyond the horizontal boundaries of the parent element. */
table-layout: auto;
code {
font-size: 85%;
padding: 0.2em 0.4em;
background-color: var(--color-canvas-subtle);
border-radius: 6px; // primer rounded-2
}
pre > code {
padding: 0;
background-color: transparent;
}
thead tr {
border: none;
}
th {
font-weight: normal;
text-align: left;
position: sticky;
vertical-align: top;
z-index: 1;
top: 0;
background: var(--color-canvas-default);
box-shadow: 0 3px 0 0 var(--color-canvas-subtle);
padding: 0.75rem 0.5rem;
border: 0;
}
th[align="center"] {
text-align: center;
}
th[align="right"] {
text-align: right;
}
th:first-child,
td:first-child {
padding-left: 0;
}
td {
padding: 0.75rem 0.5rem;
border: 0;
vertical-align: top;
}
// markdown that has been converted to HTML is often wrapped in <p> tags
// don't let it interfere with the spacing
td p {
padding: 0;
margin: 0;
}
tr:nth-child(2n) {
background: none;
}
td.has-nested-table {
width: 100%;
table {
table-layout: auto;
}
}
}
}