CODEWITHSUNDEEP
htmlcss
Smeegs
Smeegs

Reputation: 9224

Why does this table extend past the width of the window?

I can't figure out what to do to make this work. I just want to have the innermost div scrollable, but for some reason the width extends past the window.

<table style='max-height: 100%; width: 100%; margin: 0; border: 0px none white; display: block;'>
    <tr style='border: 0px none white; width: 100%;'>
        <td style='border: 0px none white; width: 100%;'>
            <div style='overflow-y: scroll; overflow-x: hidden; width: 100%;'>
                <div style='padding-left: 5px; width: 100%;'>
                    <div style='overflow: auto; width: 100%; border-radius: 10px; border: 1px solid silver; background-color: transparent;'>
                        <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

here is a fiddle

Upvotes: 0

Views: 1777

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Remove display:block from the table (otherwise you might as well use a <div>), and add
table-layout:fixed. This forces the table to the width you say, instead of treating it as "min-width"

Upvotes: 2

Related Questions