Příklad chybného výpočtu šířky tabulky

Má-li div nadřazený tabulce nastaven nějaký horizontální okraj (margin nebo padding), tabulka špatně počítá stoprocentní šířku (moc velkou, neumí odečíst ten okraj):

Použitý kód:

<div style="margin-left: 100px; border: 1px solid blue">
    <table style="width: 100%; border: 1px solid red">
        <tr>
            <td>obsah tabulky, která přetéká moc napravo</td>
        </tr>
    </table>

    <div style="width: 100%; border: 1px solid red">
        obsah divu, který by tu chybu dělat neměl
    </div>
</div>

Řešení

Řešení spočívá v ještě jednom mezi-divu s nastavenou stoprocentní šířkou:

Použitý kód:

<div style="margin-left: 100px; border: 1px solid blue">
    <div style="width: 100%;">
        <table style="width: 100%; border: 1px solid red">
            <tr>
                <td>obsah tabulky, která už nepřetéká moc napravo, protože je obalena ještě jedním divem</td>
            </tr>
        </table>
    </div>
</div>

Příklad se vztahuje k css vlastnosti width.