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>

I set the div of width 500px, and under it I have p and table elemetns. The p element adjust to the width of the div, while the table has its own width, which doesnt necessarily adjust to fit into 500px. I don't know how this works, can anyone explain it to me? Thanks

Answer 1

By default, <table> elements adjust to auto fit their contents. If the contents don't need the full container, the space isnt taken. You can change this behavior by styling the table with:

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

In which case it will take all available width if possible.