CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
boisterouslobster
boisterouslobster

Reputation: 1293

Bootstrap two tables side by side header issues

I ran into an issue while trying to place two tables in the same bootstrap row. They appear just fine, however the panel-heading element gets cutoff because of some strange CSS restriction.

I noticed the issue starts when I try to add this line in:

<div class="panel panel-default col-md-6">

Unfortunately this is somewhat required, as it will specify the table takes up 50% of width of the parent element. Does anyone have any advice on how to isolate the responsible CSS rule/how to fix this issue?

JS Fiddle

Upvotes: 0

Views: 110

Answers (1)

Sarhanis
Sarhanis

Reputation: 1587

What's required is to introduce another div around those with the class of panel.

Here's what it should look like:

<div class="col-md-6">
    <div class="panel panel-default">

Here's an updated Fiddle: https://jsfiddle.net/x9d5k7Lv/12/

Upvotes: 1

Related Questions