Issues with .table-bordered in a .panel

[jcberquist]

The new styles for using bordered tables in panels (without double bordering) are great! But I do have a couple of minor issues/enhancement requests. I would like to be able to wrap a bordered table in a panel with .table-responsive for scrolling purposes. Since the recently added css selectors use .panel>.table-bordered, the new styles won't apply in such a case. Also, if the table uses the .table-striped class and the last row is odd, then the table cell backgrounds clip over the panel border in the bottom corners.

[ghost]

Confirmed: http://jsfiddle.net/DNFfV/

[supergibbs]

The .table-striped in a .panel is still an issue.

The issue is actually if a td is given a background (instead of transparent) it clips the rounded corners of the panel.

[mdo]

@supergibbs Only problem I saw was the rounded corners, which I just fixed for v3.1.

[supergibbs]

@mdo Yes I that is the issue, I was just pointing out if the td background-color was set from any styling the issue occurred. It wasn't necessarily the .table-striped class.

Slight bug in your commit, panels.less:106 should be border-bottom-right-radius: (@panel-border-radius - 1); (not left)

There is still the rare use case when the panel has no heading or body and is just used to add a colored rounded border. The table clips the top corners (if the first row has a background color). Not sure if this is supported though.

http://jsfiddle.net/DNFfV/10/

[supergibbs]

Updated examples with my pull request

http://jsfiddle.net/DNFfV/16/