其他表内的引导表|固定桌子的高度答案

【问题标题】：Bootstrap table inside other table | Fix the height of table其他表内的引导表|固定桌子的高度
【发布时间】：2017-08-26 12:11:11
【问题描述】：

我的网页没有什么问题。我使用 bootstrap 4 并在表格框中设置在其他表格中，如下图所示。如何让table里面的高度和盒子的高度（td）一样？

html:

<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table" style="height: 100%">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

浏览器：

【问题讨论】：

从检查元素样式中检查它。我认为表格框旁边会有一些 padding-bottom 或 margin-bottom。
请再看我的帖子。我从浏览器检查中添加了屏幕图片。
检查是否提供静态填充底部：-20px !important; to table 和 tr 标签
它也没有用。 =(

标签： html css html-table twitter-bootstrap-4

【解决方案1】：

因为表格有CSS属性margin-bottom: 20px，所以需要添加一个覆盖CSS来移除这个属性：

<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table table-no-margin" style="height: 100%">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<style>
    .table-no-margin { margin: 0 }
</style>

【讨论】：

不幸的是它没有用。它仍然显示桌子下的空间。
您是否将table-no-margin 类添加到子表中？你可以试试.table-no-margin { margin: 0 !important; }
是的，我将此样式添加到子表中。没用。好难过=(
我认为您需要使用浏览器检查此表格元素以查看覆盖margin: 0 !important的内容
哦不，您必须右键单击子表并选择Inspect Element，然后您需要在Inspector 中选择子表才能查看对您的margin: 0; 的真正影响

【解决方案2】：

发生这种情况是因为您的嵌套表格的边距底部为 1rem（默认引导 css）。覆盖它就是这样。

工作示例

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table" style="height: 100%; margin-bottom:0px;">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

【讨论】：

我以前试过这个，但它对我不起作用。这就是我在stackoverflow中问这个问题的原因。
没有其他原因会发生这种情况..我认为您的自定义 css 没有覆盖引导 css。尝试在表格中添加一个 id，然后对其进行样式设置。在引导 css 之后添加您的自定义 css。如果它们都不起作用，请尝试添加 !important，尽管不建议这样做。
在我的帖子末尾，您可以从浏览器中看到屏幕，它们表明表格的边距样式没有被覆盖。这里 parent 是 td 元素，child 是 table。所以我需要为子元素赋予与父元素相同的高度。
发布您的完整 html

【解决方案3】：

这个问题has been asked many times before，但我会针对你的场景专门回答。这不是删除填充/边距的问题。

为了得到一个 100% 高度的表格，它的容器也必须是 100% 高度。所以在这种情况下将包含td 设置为height: 100%...

Demo on Codeply

       <td>REVERT</td>
       <td style="padding:0;height: 100%;">
           <table class="table" style="height: 100%">
                <tbody>
                     <tr>
                        <td>Name</td>
                        <td>LONG TEXT</td>
                     </tr>
                </tbody>
           </table>
       </td>

【讨论】：