CSS盒子模型宽度

Question

<div style="width:500px;">
    <p>To create not a block, but an inline code span,use backticks:Press the `<Tab>` key, then type a `$`.If you want to have a preformatted block within a list, indent by eight spaces: </p>
    <table>
<thead>
    <tr><th>Action</th>
        <th>abc</th>
        <th>xyz</th>
    </tr>
</thead>
<tbody>
    <tr><td>hihi</td>
        <td>hihi</td>
    </tr>
</tbody>
</table>

我设置宽度为500px的div，在其下面我有p和table elemet。 p元素调整为div的宽度，而表格有自己的宽度，不一定要调整到适合500px。我不知道这是怎么回事，有人能解释一下吗？感谢

Answer 1

默认情况下，<table>元素会调整为自动调整其内容。如果内容不需要整个容器，则不占用空间。您可以通过使用以下方式设置表格来更改此行为：

<table style="width: 100%;">

在这种情况下，如果可能，它将占用所有可用宽度。