[v4 css] inverted table styling
Created by: Mottie
When inverting a table style using the table-inverse
class (demo):
-
Striping
With a "table-striped" class, the stripes are not discernibly different. In the css, the definition is the same as for the non-inverted row styling:.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, .05); /* $table-bg-accent; */ }
-
Borders
The border styling of the non-inverted tables is a very subtle, using a border color of#eceeef
. On inverted tables, we see#fff
! It's way to bright!.table-inverse td, .table-inverse th, .table-inverse thead th { border-color: #fff; /* $body-bg */ }
-
Hover
Hovering isn't as bad when no stripe is applied to the table; but when a stripe is applied, the hover is only slightly more discernible than the row color (demo)!.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, .075) /* $table-bg-hover */ }
This may not seem like a big deal to some of you young 'uns out there, but for elderly and visually impaired users, it would make a difference.