Created by: MartijnCuppens
Edit: I'm going to review this for v5
- Border-color styles of table elements (
thead
,tbody
,tfoot
,tr
,td
&th
) are inherited from their parent. This allows us to easily modify styles without the generation of a lot of css selectors. - Support for
tfoot
. There will always be a thicker line betweenthead
,tbody
&tfoot
. - Nested
.table
s don't inherit styles anymore - Vertical alignment can be changed with
$table-vertical-align
-
$table-colors
sass map allows us to easily add or remove colored tables -
.thead-light
and.thead-dark
are removed in favor of more universal.table-light
and.table-dark
(classes generated from$table-colors
sass map) - Posibility to show/remove top/bottom table border with
$table-show-border-top
&$table-show-border-bottom
- The text color of the colored tables is determined by color contrast function (
color-yiq()
) - Striped and hover backgrounds are set with
box-shadow
instead ofbackground-color
. This way we don't have to generate all the background colors for colored striped tables and colored hoverable tables. - Table row hover states now have transitions (
@transition
mixin) - Striped and hover backgrounds of darker tables (determined by
color-yiq()
) have lighter rows, so that there is enough contrast. - I had to check if a color was dark or light so I added the
is-light
andis-dark
functions. These might come in handy for other purposes in the future. - Documentation cleanup and explanation about how the colored tables work added. Copy might need some adjustments.
- Didn't change anything with the responsive tables.
Known issue:
- Darker tables use lighter striped and hover backgrounds, but this only works when the class is added to the table. No support for lighter striped and hover backgrounds on the elements inside the table, because too much css must be generated to achieve this.
Also made an interactive codepen demo: https://codepen.io/MartijnCuppens/pen/jxRJPB
Documentation page: http://martijncuppens.github.io/tables/docs/4.1/content/tables/
Closes #25842 (closed), closes #25685 (closed), closes #25675 (closed), closes #24529 (closed), closes #27312 (closed) Related PRs: #25864, #25755, #25677, #24660