Html 引导表在其他表中|固定表的高度

我的网页没有什么问题。我使用bootstrap 4，并在另一张表内的表框中设置，如下图所示。如何使内部桌子的高度与箱子的高度（td）相同

html:

还原
名称
长文本

浏览器：

---

由于表格具有CSS属性

页边距底部：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{margin:0}

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

工作示例

还原
名称
长文本

这个问题，但我会针对您的场景专门回答。这不是删除填充/边距的问题

为了得到一个100%高度的桌子，它的容器也必须是100%高度。因此，在本例中，将包含的

td

设置为

height:100%

还原
名称
长文本

不幸的是，它不起作用。它仍然显示表下的空格。您是否在子表中添加了

table no margin

class？您可以尝试

.table no margin{margin:0！important；}

是的，我将此样式添加到子表中。没用。真伤心=（我认为您需要使用浏览器检查此表元素，以查看哪些内容覆盖了

页边距：0！重要信息

哦，不，您必须右键单击子表并选择

检查元素

，然后您需要在Inspector中选择子表，以查看对

页边距：0；的真正影响；

从inspect元素检查它。）ent样式。我想在表格框的侧面会有一些填充底部或边距底部。请再次查看我的帖子。我从浏览器检查中添加了屏幕图片。检查静态填充底部：-20px！重要；表格和tr标签也不起作用=（我以前尝试过这个，但它对我不起作用。这就是我在stackoverflow中问这个问题的原因。发生这种情况可能没有其他原因。我认为您的自定义css没有覆盖引导css。尝试向表中添加id，然后设置样式。在引导css之后添加自定义css。如果没有任何一个可用，请尝试添加！重要，尽管如此。）虽然不建议这样做。在我文章的最后，你可以从浏览器中看到屏幕，它们显示表格的边距样式没有被覆盖。这里父元素是td元素，子元素是表格。所以我需要给子元素赋予与父元素相同的高度。发布完整的html

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

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