Question

我最近被引入了引导程序，我正在尝试制作一张桌子，但出于某种原因，如果我把桌子放在一个面板中，顶部，左边，右边，底部的边框突然消失了，我我不确定是什么导致了这一点。

<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>

我会拍一张照片，但它说我需要10个声望点，但我希望你能解决我的问题。如果我删除了面板，表格的边框会突然出现。

Answer 1

你可以使用那种风格。

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

Answer 2

来自bootstrap docs关于小组：

在面板中添加任何非边界.table以实现无缝设计。如果有.panel-body，我们会在表格顶部添加一个额外的边框以便分离。

您可以在面板中使用表格，但不能在panel-body或panel-heading内使用这些表格，因为它们将以分开的边框显示，而且大多数情况并非如此。

我提供了一些工作bootply examples来显示默认用法。

修改

此外，面板不是为了容纳多个表而设计的，但对于您的用例，您可能只想添加其他表行而不是其他表。

查看additional bootply sample中的结果。

使用Bootstrap面板删除引导程序表边框

2 个答案: