Wie kann ich ein Div nicht größer als sein Inhalt machen?

Question

Ich habe ein ähnliches Layout:

<div>
    <table>
    </table>
</div>

Ich möchte, dass die div nur so weit ausdehnen, wie mein table wird.

Answer 1

Ich würde einfach die padding: -whateverYouWantpx;

Answer 2

Ich habe eine span innerhalb einer div und nur die Einstellung margin: auto zum Container div hat für mich funktioniert.

Answer 3

Einfach

<div style="display: inline;">
    <table>
    </table>
</div>

Answer 4

Wie wäre es, wenn wir eine globale Variable definieren und diese für beide verwenden?

:root {
    --table-width: 400px;
}

.container{
     width:var(--table-width);
     border: 1px solid black;   // easy visualization
}
.inner-table {
     width:var(--table-width);
     border: 1px solid red;   // easy visualization
}

<div class="container">
    <table class="inner-table">
       <tr>
           <td>abc</td>
       </tr>
    </table>
</div>

Answer 5

Ich persönlich mache das einfach:

HTML-Code:

<div>
    <table>
    </table>
</div>

CSS-Code:

div {
    display: inline;
}

Wenn Sie ein float auf Ihr div anwenden, funktioniert es auch, aber natürlich müssen Sie eine "clear both" CSS-Regel auf das nächste HTML-Element anwenden.