Tried redoing this in flexbox, but it falls apart really quickly. Any changes in height of the cells throws it all off since the rows become columns (and thus, content across columns cannot be equally sized). Rather than implement something with such glaring flaws, I'm nuking it outright.

- Add inverse examples for all variants
- Use rgba() colors for hover and accent states for easy usage in inverse styles

- Rename -height to -height-base to match other vars
- Drop use of -height across the board and rely on it to be inherited
- Adjust padding of .dropdown-header to account for different line-height of h6 heading element (this needs refactoring for variables and rems also)

See the IE9 note in https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover#Browser_compatibility
The prereqs to trigger the bug are still present in v4.
/fyi @mdo

[skip sauce]
[skip validator]

Fixes #13202: Always use overflow: auto; on .table-responsive to prevent content breaking out of containers

Fixes #14095: Add basic styling for captions, which we've for some reason been missing all this time.

if background is not set on row, striping doesn't work properly in responsive tables where row and cells are set to  display: block.

Table-responsive: changed overflow-x to auto to hide scrollbar when it's not overflown, fixes #13669.