CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Stevenson
John Stevenson

Reputation: 7

Using Bootstrap's panel removes bootstrap table's border

I've been recently introduced to bootstrap and I'm trying to make a table but for some reason, if I put my table inside a panel, the borders on the top,left,right,bottom suddenly disappears and I'm not sure what's causing this.

<div class="container"> 
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
<br>
<table class='table table-striped table-bordered'>
<tr>
<td width='12%'>
<b>Message Title:</b>
</td>
<td>
Title
</td>
</tr>
<tr>
<td>
<b>Message Body:</b>
</td>
<td>
Body
<br /><br />
<h6><b>Created By:</b> John | <b>Created On:</b> February 13, 2015 3:45pm </h6>
</td>
</tr>
</table>
<hr>
<table class='table table-striped table-bordered'>
<tr>
<td width='12%'>
<b>Message Title:</b>
</td>
<td>
Title
</td>
</tr>
<tr>
<td>
<b>Message Body:</b>
</td>
<td>
Body
<br /><br />
<h6><b>Created By:</b> John | <b>Created On:</b> February 15, 2015 1:23pm </h6>
</td>
</tr>
</table>
<hr>
            </div>
        </div>
    </div>
</div>

I would put a picture but it says I need 10 reputation points but I do hope you get my problem. If I remove the panel, the tables' borders suddenly appear.

Upvotes: 0

Views: 1750

Answers (2)

timo.rieber
timo.rieber

Reputation: 3867

From the bootstrap docs regarding panels:

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

You can use tables within panels, but not within panel-body or panel-heading as they will be displayed with separated borders, what is mostly not intended.

I've provided some working bootply examples to show default usage.

EDIT:

Also, panels are not designed to hold multiple tables, but for your use case you may simply want to add additional table rows instead of additional tables.

See the results in the additional bootply sample.

Upvotes: 1

nevra
nevra

Reputation: 428

You can use that style.

<div class="panel panel-default">
   <div class="panel-heading">
      Panel heading without title
   </div>
   <div class="panel-body">
      Table content
   </div>
</div>

Upvotes: 1

Related Questions