.table in .table-responsive inside .panel still has bottom-margin
Created by: moollaza
Please correct me if I'm wrong, but looking at panels.less
lines 58-62:
.panel {
> .table,
> .table-responsive {
margin-bottom: 0;
}
https://github.com/twbs/bootstrap/blob/master/less/panels.less#L52
It looks like the margin is supposed to be removed from the table, however its removing the margin from the .table-response
wrapping the .table
rather than the .table
itself.
This also assumes there is no .panel-heading
which in my case I also have.
I believe the fixed code should look something like this:
.panel,
.panel > .panel-heading {
> .table,
> .table-responsive > .table {
margin-bottom: 0;
}
**Note: This margin is properly removed once the width drops below 767px because table.less
has proper css to handle .table-responsive > .table
Update: Reproduced with JSFiddle: http://jsfiddle.net/moollaza/P3YC9/3/