I am trying to have a `div` with a horizontal scrollbar inside a table that has 100% width:

```
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
        <tr>
            <td>
                <div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;">
                    <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
                </div>
            </td>
        </tr>
    </table>
</div>

```

I don't know why, but all browsers display `#div2` 1000px wide instead of 800px. Why is that?

How can I achieve displaying it only 800px wide and have a scrollbar inside `#div2`? 

I don't want to specify the exact width for the `<td>` tag.