Html Bootstrap Panel-body，里面有桌子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32673279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Panel-body with table inside
提问by SBB
I have a bootstrap panel that collapses it self closed on click of an icon. This panel contains a table inside that is full width but only looks this way when there is no panel-body.
我有一个引导面板，它可以在单击图标时自动关闭。该面板包含一个全宽的表格，但只有在没有panel-body.
For example, this table spans the full width and height of the panel, looks fine but I'd prever if I could have a class that surrounds the table. However, If I put something there, it adds padding to it:
例如，这张桌子跨越了面板的整个宽度和高度，看起来不错，但如果我能有一个围绕桌子的类，我会更喜欢。但是，如果我把一些东西放在那里，它会增加填充：
<div class="panel panel-default">
<div class="panel-heading">Title Here</div>
<table class="table table-bordered table-hover specialCollapse">
....
</table>
This block of code has a class that surrounds the table, however it then adds padding to it and doesnt look the same:
这个代码块有一个围绕表格的类，但是它然后向它添加了填充并且看起来不一样：
<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>
I wouldn't mind if I was able to use the original panel-bodyif it can be changed to have full width & height tables like the first block of code.
我不介意我是否能够使用原始文件，panel-body如果它可以更改为像第一个代码块那样具有全宽和高度表。
Here is a quick fiddle example: http://jsfiddle.net/z0y0hp8o/1/
这是一个快速的小提琴示例：http: //jsfiddle.net/z0y0hp8o/1/
This is the final result I want BUT, I need the table to be wrapped around a panel-bodywith no padding. This needs a new class though because other panels on the page need to act like normal.
这是我想要的最终结果，但是，我需要将桌子包裹在panel-body没有填充的a 周围。这需要一个新类，因为页面上的其他面板需要像正常一样运行。
In short... I need a table to be full width and height when inside a panel-body
简而言之......我需要一张桌子在里面时是全宽和全高 panel-body
采纳答案by Vimalan Jaya Ganesh
Try adding the following styles in your custom css:
尝试在您的自定义 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/
提琴手：http : //jsfiddle.net/z0y0hp8o/6/
I hope the above solution will work for you.
我希望上述解决方案对您有用。
回答by Tushar Khatiwada
There's a default stylesheet added by bootstrap for the panel body:
bootstrap 为面板主体添加了一个默认样式表：
.panel-body {
padding: 15px;
}
So add your own css to replace the above with:
所以添加你自己的css来替换上面的：
.panel-body {
padding: 0;
}
回答by Destination Designs
if you dont want to remove the padding from every panel-body, ad an ID and remove the padding from it.
如果您不想从每个面板主体中删除填充，请添加一个 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>
and then:
进而：
#tablePanelBody {
padding: 0;
}
回答by Jeroen Wienk
Try replacing the div with another table element, ugly solution but it works.
尝试用另一个表格元素替换 div，丑陋的解决方案但它有效。
<table class="panel-body specialCollapse">
<table class="table table-bordered table-hover goup">
...content
</table>
</table>
