Skip to content
GitLab

Colored tables, prevent style leaks from nested tables & other table tweaks

Closed Administrator requested to merge github/fork/MartijnCuppens/tables into v4-dev

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 between thead, tbody & tfoot.
  • Nested .tables 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 of background-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 and is-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