@digdir/designsystemet-css/dist/src/table.css

CSS for Designsystemet

.ds-table{--dsc-table-background--hover:var(--ds-color-surface-hover);--dsc-table-background--zebra:var(--ds-color-surface-tinted);--dsc-table-background:transparent;--dsc-table-border-color:var(--ds-color-border-subtle);--dsc-table-border-radius:var(--ds-border-radius-md);--dsc-table-border-style:solid;--dsc-table-border-width:var(--ds-border-width-default);--dsc-table-color:var(--ds-color-text-default);--dsc-table-divider-border-color:var(--dsc-table-border-color);--dsc-table-divider-border-style:solid;--dsc-table-divider-border-width:calc(var(--ds-border-width-default) + 1px);--dsc-table-header-background--hover:var(--ds-color-surface-hover);--dsc-table-header-background--sorted:var(--ds-color-surface-tinted);--dsc-table-header-background--sticky:var(--ds-color-surface-default);--dsc-table-header-background:transparent;--dsc-table-padding:var(--ds-size-2) var(--ds-size-3);--dsc-table-sort-size:var(--ds-size-6);--_dsc-table-border-radius--inner:calc(var(--dsc-table-border-radius) - var(--dsc-table-border-width));border-collapse:separate;border-spacing:0;box-sizing:border-box;color:var(--dsc-table-color);width:100%}.ds-table>:is(tbody,thead,tfoot)>tr>:is(th,td){background:var(--dsc-table-background);border-bottom-style:var(--dsc-table-border-style);border-bottom-width:var(--dsc-table-border-width);border-color:var(--dsc-table-border-color);padding:var(--dsc-table-padding);text-align:inherit}.ds-table th{font-weight:var(--ds-font-weight-semibold)}.ds-table>thead>tr>:is(th,td){background:var(--dsc-table-header-background)}.ds-table>thead>tr:last-child>:is(th,td){border-bottom:var(--dsc-table-divider-border-width) var(--dsc-table-divider-border-style) var(--dsc-table-divider-border-color)}.ds-table>tbody:has(+tfoot)>tr:last-child>:is(th,td){border-bottom:none}.ds-table>tfoot>tr:first-child>:is(th,td){background:var(--dsc-table-header-background);border-top:var(--dsc-table-divider-border-width) var(--dsc-table-divider-border-style) var(--dsc-table-divider-border-color)}.ds-table>tfoot>tr:last-child>:is(th,td){border-bottom:none}:is(.ds-table>caption){font-size:1.3em;font-size:round(down,1.3em,1px);font-weight:var(--ds-heading-md-font-weight);letter-spacing:var(--ds-heading-md-letter-spacing);line-height:var(--ds-heading-md-line-height);margin:0}[data-size="2xs"]:is(.ds-table>caption){font-size:var(--ds-heading-2xs-font-size);font-weight:var(--ds-heading-2xs-font-weight);letter-spacing:var(--ds-heading-2xs-letter-spacing);line-height:var(--ds-heading-2xs-line-height)}[data-size=xs]:is(.ds-table>caption){font-size:var(--ds-heading-xs-font-size);font-weight:var(--ds-heading-xs-font-weight);letter-spacing:var(--ds-heading-xs-letter-spacing);line-height:var(--ds-heading-xs-line-height)}[data-size=sm]:is(.ds-table>caption){font-size:var(--ds-heading-sm-font-size);font-weight:var(--ds-heading-sm-font-weight);letter-spacing:var(--ds-heading-sm-letter-spacing);line-height:var(--ds-heading-sm-line-height)}[data-size=md]:is(.ds-table>caption){font-size:var(--ds-heading-md-font-size)}[data-size=lg]:is(.ds-table>caption){font-size:var(--ds-heading-lg-font-size);font-weight:var(--ds-heading-lg-font-weight);letter-spacing:var(--ds-heading-lg-letter-spacing);line-height:var(--ds-heading-lg-line-height)}[data-size=xl]:is(.ds-table>caption){font-size:var(--ds-heading-xl-font-size);font-weight:var(--ds-heading-xl-font-weight);letter-spacing:var(--ds-heading-xl-letter-spacing);line-height:var(--ds-heading-xl-line-height)}[data-size="2xl"]:is(.ds-table>caption){font-size:var(--ds-heading-2xl-font-size);font-weight:var(--ds-heading-2xl-font-weight);letter-spacing:var(--ds-heading-2xl-letter-spacing);line-height:var(--ds-heading-2xl-line-height)}.ds-table>caption{margin-bottom:var(--ds-size-1);text-align:inherit}.ds-table>thead>tr>[aria-sort]{cursor:pointer;padding:0}:is(.ds-table>thead>tr>[aria-sort])>button{background:none;border:0;box-sizing:border-box;color:inherit;cursor:pointer;font:inherit;padding:var(--dsc-table-padding);text-align:inherit;width:100%}:is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible *{--_ds--focus: }:is(:is(.ds-table>thead>tr>[aria-sort])>button):not([hidden]){display:block}:is(:is(.ds-table>thead>tr>[aria-sort])>button):focus-visible{position:relative}:is(:is(.ds-table>thead>tr>[aria-sort])>button):after{background:currentcolor;content:"";display:inline-block;flex-shrink:0;height:var(--dsc-table-sort-size);-webkit-mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z'/%3E%3C/svg%3E");vertical-align:middle;width:var(--dsc-table-sort-size)}[aria-sort=ascending]:is(.ds-table>thead>tr>[aria-sort])>button:after{-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E");mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.47 7.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 1 1-1.06 1.06L12 9.56l-4.97 4.97a.75.75 0 0 1-1.06-1.06z'/%3E%3C/svg%3E")}[aria-sort=descending]:is(.ds-table>thead>tr>[aria-sort])>button:after{-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")}:is(.ds-table>thead>tr>[aria-sort]):not([aria-sort=none])>button{background:var(--dsc-table-header-background--sorted)}.ds-table[data-border]{border-color:var(--dsc-table-border-color);border-radius:var(--dsc-table-border-radius);border-style:var(--dsc-table-border-style);border-width:var(--dsc-table-border-width)}.ds-table[data-border]>:last-child>tr:last-child>:is(th,td){border-bottom:none}:is(.ds-table[data-border]>:is(thead:first-of-type,:not(:has(thead)) tbody:first-of-type)>tr:first-child>:is(th,td)):first-child{border-top-left-radius:var(--_dsc-table-border-radius--inner)}:is(.ds-table[data-border]>:is(thead:first-of-type,:not(:has(thead)) tbody:first-of-type)>tr:first-child>:is(th,td)):last-child{border-top-right-radius:var(--_dsc-table-border-radius--inner)}:is(.ds-table[data-border]>:is(tfoot:last-of-type,:not(:has(tfoot)) tbody:last-of-type)>tr:last-child>:is(th,td)):first-child{border-bottom-left-radius:var(--_dsc-table-border-radius--inner)}:is(.ds-table[data-border]>:is(tfoot:last-of-type,:not(:has(tfoot)) tbody:last-of-type)>tr:last-child>:is(th,td)):last-child{border-bottom-right-radius:var(--_dsc-table-border-radius--inner)}.ds-table[data-sticky-header]{overflow:auto;position:relative}.ds-table[data-sticky-header]>thead>tr>:is(th,td){background:var(--dsc-table-header-background--sticky);position:sticky;top:0;z-index:2}.ds-table[data-zebra]>tbody>tr>:is(th,td){border-block:0}.ds-table[data-zebra]>:is(thead,tbody)>tr:nth-child(2n)>:is(th,td){background:var(--dsc-table-background--zebra)}@media (hover:hover) and (pointer:fine){.ds-table[data-hover]>tbody>tr:hover>:is(th,td){background:var(--dsc-table-background--hover)}.ds-table>thead>tr>[aria-sort]:hover button{background:var(--dsc-table-header-background--hover)}}