CODEWITHSUNDEEP
htmlcss
Vikas NS
Vikas NS

Reputation: 438

overflow-x is not working when the overflowing table is placed inside another table

<html>
    <body>
        <table width="100%" >
        <tbody>
            <tr>
                <td>
                    <div width=100% style="overflow-x: scroll; overflow-y: scroll;" >
                        <table>
                            <tr>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

I the above code I have with "apple" nested inside another table. I'm expecting a horizontal scroll bar when the content overflow. But I'm getting a scroll bar just below the table which cannot be scrolled. Instead I'm getting a scrollbar for the whole page.

enter image description here

Upvotes: 0

Views: 1311

Answers (1)

Aleksandr Belugin
Aleksandr Belugin

Reputation: 2227

First of all, div doesn't have width attribute.

Secondly, you have to specify the width, 100% of what? Now it is not known. Give a specific width to this div or to it's some parent.

Look into my snippet.

<html>
    <body>
        <table width="100%" >
        <tbody>
            <tr>
                <td>
                    <div style="overflow-x: scroll; overflow-y: scroll;width: 444px;" >
                        <table>
                            <tr>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

Upvotes: 1

Related Questions