html - Bootstrap Panel-body，里面有 table

我有一个引导面板，它可以在单击图标时自动关闭。该面板包含一个全宽的表格，但只有在没有 panel-body 时才会这样。

例如，这张 table 跨越了面板的整个宽度和高度，看起来不错，但如果我能有一个围绕 table 的类，我会更喜欢。但是，如果我把一些东西放在那里，它会增加填充:

<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 更改为像第一个代码块一样具有全宽和高度表，我不介意我是否能够使用原始 panel-body。

这是一个快速的 fiddle 示例:http://jsfiddle.net/z0y0hp8o/1/

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

简而言之......我需要一个表格在 ojit_code 中是全宽和全高

最佳答案

尝试在您的自定义 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;}

fiddle 手: http://jsfiddle.net/z0y0hp8o/6/

我希望上述解决方案对您有用。

关于html - Bootstrap Panel-body，里面有 table ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32673279/