Bootstrap-Tisch in anderem Tisch | Fix die Höhe der Tabelle

-2

Ich habe ein kleines Problem in meiner Webseite. Ich benutze bootstrap 4 und in der Tabelle box ich in andere Tabelle wie im Bild unten gesetzt. Wie man die Höhe des Tisches innerhalb der Höhe des Kastens (td) bildet?Bootstrap-Tisch in anderem Tisch | Fix die Höhe der Tabelle

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>

Browser:

Quelle

2017-04-01 Nurzhan Nogerbek

es Überprüfen von Elementstilen inspizieren. Ich denke, dass es unten in der Tischbox einen Polsterboden oder einen Rand geben wird. –

Schau meine Post bitte noch einmal an. Ich habe Bildschirmbilder vom Browser inspect hinzugefügt. –

Überprüfen Sie, ob das statische Padding unten ist: -20px! Wichtig; zu Tabelle und tr Tags –

Da die Tabelle CSS-Attribut margin-bottom: 20px haben, müssen Sie eine Überschreibung CSS hinzufügen, um dieses Attribut zu entfernen:

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

Quelle

2017-04-01 07:21:03

Leider hat es nicht funktioniert. Es zeigt immer noch den Platz unter der Tabelle. –

Haben Sie 'table-no-margin' Klasse in untergeordnete Tabelle hinzugefügt? Sie können' .table-no-margin {margin: 0! wichtig;} ' –

Ja, ich habe diesen Stil zu untergeordneten Tabelle hinzugefügt. Hat nicht funktioniert. So traurig = ( –

Dies passiert, weil Ihre geschachtelte Tabelle einen Rand von 1rem hat (Standard-Bootstrap CSS). überschreibe es, das ist es.

Arbeitsbeispiel

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

Quelle

2017-04-01 09:08:07 neophyte

Ich habe das vorher versucht, aber es hat nicht funktioniert für mich.Daher habe ich diese Frage in s gestellt Schnelldurchlauf. –

Es kann keinen anderen Grund dafür geben .. Ich denke, dass Ihre benutzerdefinierte css das Bootstrap css nicht überschreibt. Versuchen Sie, der Tabelle eine ID hinzuzufügen und sie dann zu formatieren. Fügen Sie Ihre benutzerdefinierte CSS nach dem Bootstrap CSS hinzu. Wenn keiner von ihnen funktioniert, versuche,! wichtig hinzuzufügen, obwohl das nicht empfohlen wird. – neophyte

Am Ende meines Posts können Sie die Bildschirme vom Browser sehen und sie zeigen, dass der Randstil der Tabelle nicht überschrieben wird. Hier Eltern ist Td-Element und Kind ist Tabelle. Also muss ich dem Kindelement die gleiche Höhe geben wie dem Elternelement. –

Diese Frage has been asked many times before, aber ich werde es speziell für Ihr Szenario beantworten. Es ist kein Problem des Entfernens Padding/Margen.

Um eine Tabelle mit 100% Höhe zu erhalten, muss der Container ebenfalls 100% hoch sein. Also in diesem Fall stellen Sie die enthaltende 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>

Quelle

2017-04-01 13:22:39 ZimSystem

Bootstrap-Tisch in anderem Tisch | Fix die Höhe der Tabelle

Antwort

Verwandte Themen