Question

我的网页没什么问题。我使用bootstrap 4，在表格框中我设置在其他表格中，如下图所示。如何使桌子的高度与盒子的高度（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>

浏览器：

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

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

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

其他表内的Bootstrap表|修复表

3 个答案: