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
答
尝试添加以下样式在您的自定义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/
希望以上解决方案会为你工作。
答
如果您不想从每个面板主体中删除填充,请添加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;
}
答
尝试用另一个表元素,丑陋的解决方案替代股利,但它的工作原理。
<table class="panel-body specialCollapse">
<table class="table table-bordered table-hover goup">
...content
</table>
</table>
这非常接近,表格上仍然有一个外部边界,需要从中去除面板边框作为表格的边框。 – SBB
我看到了,并在其上工作:) –
我已经更新了小提琴和答案。如果您对此仍有疑问,请回复。 –