html - Panel inside panel in Bootstrap not creating rounded corners

Question

Using Twitter Bootstrap to draw Panels. I have change the padding and background-color, and the round corners isn't get rendered anymore.

Example:

FIDDLE

<div class="panel-group">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <span class="panel-subtitle">Title</span>
        </div>
        <div class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="col-md-12" style="padding: 0px;">
                    <table class="table table-striped" style="margin-bottom: 0px;">
                        <thead>
                            <tr>
                                <th>A</th>
                                <th>B</th>
                                <th>C</th>
                                <th>D</th>
                                <th>E</th>
                                <th>F</th>
                                <th>G</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>ContentA</td>
                                <td>ContentB</td>
                                <td>ContentC</td>
                                <td>ContentD</td>
                                <td>ContentE</td>
                                <td>ContentF</td>
                                <td class="expand">
                                    <p>Sub-title</p>
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            <span class="panel-title semquebra menor">Sub-sub-title</span>
                                        </div>
                                        <div class="panel-body menor">
                                            <table class="table table-condensed">
                                                <tr>
                                                    <td colspan="2">
                                                        Inner text  
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

With CSS:

body{
    padding: 20px;
    background-color: #ffffff;
}


.panel-body {
    padding: 1px; /*Works, but set it to 0 and it doesn't works*/
    background-color: #ffffff;
    border-radius: 4px;
}

In the Fiddle, you can see the outer panel doesn't have the inferior corners rounded if padding: 0px;. Changing it to padding: 1px;, works but I need 0px.

Answer 1

Same problem as before. You have a round box with a square piece inside. That's why it looks like the corners are cut off.

.panel-primary is your round box.

.table-striped>tbody>tr:nth-child(odd) is your square piece (it has a background because of bootstrap and there's not border-radius to it).

So what I ended up removing that background colour and applied it to all the td within it instead:

.table>tbody>tr>td {
  background-color: #f9f9f9;
  border-radius: 4px;
}

.table-striped>tbody>tr:nth-child(odd) {
  background: none;
}

http://jsfiddle.net/730sjq8n/6/