Background table in a panel clipping

by Supergibbs

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<p>Corner clipping occurs when a table has a background color and is in a panel</p>
<table class="table">
    <tbody>
        <tr>
            <td>
                <div class="panel panel-primary">
                    <div class="panel-body">
                        A background color is set for <code>.table .table</code> 
                    </div>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<div class="panel panel-primary">
    <div class="panel-body">Manually set a background color with style attr</div>
    <table class="table table-striped" style="background-color: #fff">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="panel panel-primary">
    <table class="table table-striped" style="background-color: #fff">
        <thead>
            <tr>
       ...

CSS

body {
    padding:10px;
}
.table th {
    background-color: #eee;
}

JavaScript

/**

The fix:

.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

**/