coreui / coreui-pro / 38430738922

96%

main: 94%

push

github

feat(Tables): add .table-card for card-like tables (#1641)

A bordered, rounded table meant nesting it in a `.card`, which brings the
card body padding, the table's bottom margin and a doubled border on the
last row. `.table-card` wraps the table instead. It draws the card's border
and corner radius (`--cui-radius-9`, the radius `.card` uses), and the frame
reads `--cui-theme-bg` the way the card's border does, so a `.theme-*` class
colours both alike. It clips the cells with `overflow: clip`, which unlike
`hidden` does not make a scroll container, so a sticky header inside still
sticks to the page. It drops the table's bottom margin and the borders that
would stack on the frame: the last row's bottom border, unless a caption
sits below it, and the outer borders of a `.table-bordered` table. It goes
around the table, around a `.table-responsive*` wrapper, or on that wrapper
itself, which keeps scrolling.

The tables page gains a "Card-like tables" section with the utilities-only
alternative and a note on what the clipping cuts, and the migration guide
lists the class.

Measured against 75f2bcf8c, gzip level 9: coreui.css +165 B (77 715 B),
coreui.min.css +170 B (73 026 B). The coreui.css ceiling goes from 75.75 to
76 kB, since the class does not fit the 18 B that were left.

7715 of 8293 branches covered (93.03%)

Branch coverage included in aggregate %.

13362 of 13660 relevant lines covered (97.82%)

1713.5 hits per line