Using Twitter Bootstrap to draw Panels. I have change the padding and background-color, and the round corners isn't get rendered anymore.
Example:
<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.
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments