引导面板身体与表里面 [英] Bootstrap Panel-body with table inside

问题描述

我有一个引导面板，它会自动关闭点击图标。这个面板包含一个全宽的表格，但只有在没有面板主体时才会这样看。

例如，这个表横跨面板的整个宽度和高度，看起来不错，但我会prever如果我可以有一个类周围的表。但是，如果我把东西放在那里，它会添加一些内容：

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

我不介意如果我能够使用原来的 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;} 
  

Fiddler： href =http://jsfiddle.net/z0y0hp8o/6/ =nofollow> http://jsfiddle.net/z0y0hp8o/6/

我希望上述解决方案能为您效劳。

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.

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-body if it can be changed to have full width & height tables like the first block of code.

Here is a quick fiddle example: http://jsfiddle.net/z0y0hp8o/1/

This is the final result I want BUT, I need the table to be wrapped around a panel-body with no padding. This needs a new class though because other panels on the page need to act like normal.

In short... I need a table to be full width and height when inside a panel-body

解决方案

Try adding the following styles in your custom 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/

I hope the above solution will work for you.

这篇关于引导面板身体与表里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！