Bootstrap面板内部的表格

我有一个引导面板，它可以在点击一个图标时自动关闭它。此面板包含一张全宽的表格，但只有在没有panel-body的情况下才会显示。Bootstrap面板内部的表格

例如，此表横跨面板的整个宽度和高度，看起来不错，但如果我可以有围绕桌子的类，我会优先考虑。但是，如果我把东西在那里，它添加填充它：

<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如果它可以更改为具有全宽&高度表，如第一个代码块。

这里是一个快速小提琴例如：http://jsfiddle.net/z0y0hp8o/1/

这是最后的结果，我想，但我需要的表panel-body周围包裹没有填充。 这需要一个新的类，因为页面上的其他面板需要像正常一样行事。

总之......我需要一个表是里面的时候全宽度和高度的panel-body

来源

2015-09-19 SBB

尝试添加以下样式在您的自定义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;}

提琴手：http://jsfiddle.net/z0y0hp8o/6/

希望以上解决方案会为你工作。

来源

2015-09-19 21:38:20

这非常接近，表格上仍然有一个外部边界，需要从中去除面板边框作为表格的边框。 – SBB

我看到了，并在其上工作:) –

我已经更新了小提琴和答案。如果您对此仍有疑问，请回复。 –

有通过引导的面板主体增加了一个默认的样式表：

.panel-body { 
    padding: 15px; 
}

因此，添加自己的css来替换上面的：

.panel-body { 
    padding: 0; 
}

来源

2015-09-19 21:19:27

还有一堆它继承的其他东西，比如表格边距，表格边框等，当表格直接位于面板内时，它们似乎被忽略。只是添加这一点的CSS不能完全解决我需要的。 – SBB

你想删除桌子周围的垫子，不是吗？它这样做。 –

这是正确的，我也提供了两者之间差异的例子。其中一个（你建议的那个）并不是我正在寻找的东西。虽然是的，但它会移动填充，桌子在面板中时与在面板中时不同（边框，边距等）。 – SBB

如果您不想从每个面板主体中删除填充，请添加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/

来源

2015-09-19 21:24:12

尝试用另一个表元素，丑陋的解决方案替代股利，但它的工作原理。

<table class="panel-body specialCollapse"> 
<table class="table table-bordered table-hover goup"> 
    ...content 
</table> 
</table>

来源

2015-09-19 21:26:19

Bootstrap面板内部的表格

回答

相关问题