Bootstrap Panel-body内有桌子

Question

我有一个自举面板，点击一个图标就可以自动关闭它。此面板包含一个全宽度的表格，但只有在没有panel-body时才会这样看。

例如，这个表格跨越了面板的整个宽度和高度，看起来很好但是如果我可以有一个围绕桌子的类，我会更好。但是，如果我把东西放在那里，它会添加填充：

<div class="panel panel-default">
  <div class="panel-heading">Title Here</div>
   <table class="table table-bordered table-hover specialCollapse">
   ....
   </table>

这段代码有一个围绕表的类，但是它然后添加了填充并且看起来不一样：

<div class="panel panel-default">
  <div class="panel-heading">Title Here</div>
   <span class="MyNewClass">
      <table class="table table-bordered table-hover specialCollapse">
      ....
      </table>
   </span>
</div>

我不介意我是否可以使用原始panel-body，如果它可以更改为全宽＆amp;高度表，如第一个代码块。

这是一个简单的小例子：http://jsfiddle.net/z0y0hp8o/1/

这是我想要的最终结果但是我需要将表包裹在panel-body内，没有填充。 这需要一个新课程，因为页面上的其他面板需要像平常一样行事。

简而言之......在panel-body

内时，我需要一张桌子的全宽和高度

Answer 1

尝试在自定义css中添加以下样式：

.table > thead > tr > th{
    border-right: 1px solid #ddd;
    border-bottom:0;
}

.table > tbody > tr > td{
    border-right: 1px solid #ddd;
}

.table > thead > tr > th:last-of-type {
    border-right: 0px;
}

.table > tbody > tr > td:last-of-type {
    border-right: 0px;
}

.panel-body {
    padding: 0;
}

.panel-body > .table{margin-bottom:0px;}

Fiddler： http://jsfiddle.net/z0y0hp8o/6/

我希望上述解决方案适合您。

Answer 2

通过bootstrap为面板主体添加了默认样式表：

DecisionTreeClassifier

所以添加你自己的css来代替上面的：

.panel-body {
    padding: 15px;
}

Answer 3

如果您不想从每个面板主体中移除填充，请添加ID并从中删除填充。

<div class="panel panel-default">
    <div class="panel-heading">Title Here</div>
        <div id="tablePanelBody" class="panel-body">
            <table class="table table-bordered table-hover specialCollapse">
                <tr><td>Hello World!</td></tr>
            </table>
        </div>
    </div>
</div>

然后：

#tablePanelBody {
    padding: 0;
}

http://jsfiddle.net/jrnwfgp7/