其他表中的引導表|修正表格的高度

-2

我在我的網頁中遇到小問題。我使用引導程序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>

瀏覽器：

來源

2017-04-01 Nurzhan Nogerbek

從檢查元素的樣式檢查它。我認爲桌面上會有一些填充底部或邊緣底部。 –

看我的帖子再次請。我添加了來自瀏覽器檢查的屏幕圖片。 –

從靜態填充底部檢查：-20px！important;到表和tr標籤 –

因爲表有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>

來源

2017-04-01 07:21:03

不幸的是，它沒有工作，它仍然顯示錶下的空間。 –

您是否已將'table-no-margin'類添加到子表中？您可以嘗試'.table-no-margin {margin：0！重要;}' –

是的，我把這個樣式添加到子表中，沒有工作，所以很傷心=（ –

發生這種情況是因爲您的嵌套表具有1rem（默認引導CSS）的margin-bottom。重寫它就是了。

工作實例

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

來源

2017-04-01 09:08:07 neophyte

我以前嘗試過，但它沒有爲我工作，爲什麼我問這個問題在s tackoverflow。 –

可能沒有其他原因會發生這種情況..我認爲您的自定義CSS不覆蓋引導CSS。嘗試添加一個id到表中，然後設置它的樣式。在引導CSS後添加自定義CSS。如果它們中的任何一個都不工作，嘗試添加！重要的，儘管這不被推薦。 – neophyte

在我的文章結尾處，您可以看到來自瀏覽器的屏幕，並且它們顯示錶格的邊距樣式不是覆蓋。這裏的父母是td元素，孩子是表格。所以我需要給父元素賦予與子元素相同的高度。 –

這個問題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>

來源

2017-04-01 13:22:39 ZimSystem

其他表中的引導表|修正表格的高度

回答

相關問題