Как сделать div не больше его содержимого?

Question

У меня есть макет, похожий на:

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

Я бы хотел, чтобы div расширился до такой же ширины, как мой table.

Answer 1

Я попробовал div.classname{display:table-cell;} и это сработало!

Answer 2

Мне кажется, что это нормально работает во всех браузерах. Примером является фактическое объявление, которое я использую онлайн и в новостной рассылке. Просто измените содержимое div. Он будет корректироваться и уменьшаться в зависимости от заданного вами размера отступа.

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</div>

Answer 3

Что если мы определим глобальную переменную и используем ее для обоих.

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

Просто

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

Answer 5

У меня span внутри div и просто установка margin: auto на контейнер div работает для меня.

Answer 6

Personnaly, я просто делаю это:

HTML код:

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

Код CSS:

div {
    display: inline;
}

Если вы примените float к вашему div, это тоже работает, но, очевидно, вам нужно применить «очистить оба» CSS-правила для следующего HTML-элемента.