.table margin-bottom: 1rem; breaks bordered responsive tables

[ppazos]

with this HTML

<div class="table-responsive table-bordered">
      <table class="table table-striped table-hover table-light">
      ....
....

Because the .table margin bottom, there is a space between the table and the border from the responsive table which breaks the UI.

The issue comes because table-light, to have a white bg table, makes the borders also white, but if you want to add borders and there is a .table-responsive containing the table, the table-bordered should be added to the .table-responsive, because there is a BT rule to make border: 0 for .table-responsive > .table-bordered.

Lots of coincidences :)

Workaround: I removed the margin bottom from the table adding that to my CSS.

[davidtmiller]

I will take a look at this and bring it into consideration when doing the new build that is coming soon. Thanks!