Horizontal Scrollbar Generated on Vertical scrollbar Overflow

2014-07-07 html css scrollbar horizontal-scrolling

I'm working in a large legacy system with thousands of pages where dynamically generated tabular data is populated into html defined in the following format:

<table style="border: 2px solid blue;">
    <tr>
        <td>
            <div style="overflow: auto; border: 2px solid orange; height: 200px;">
                <table style="border: 2px solid green;">
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                </table>
            </div>
        </td>
    </tr>
</table>

I've been tasked with removing unnecessary small horizontal scrollbars that seemingly riddle the system. After a while of examining the issue I realized that when the amount of tabular data vertically overflows the containing div and causes the vertical scrollbar to appear, the newly generated vertical scrollbar is itself pushing into the div's content area and thus causes the tabular data to overflow horizontally, thereby causing the undesired horizontal scrollbars that are appearing. In other words, when the vertical scrollbar appears it intrudes into the content space and thus causes the horizontal scrollbar to appear. This can be intuited by the fact that, no matter the width of the scrollable div, the horizontal scrollbars scrollable space is precisely the width of the vertical scrollbar.

My questions are:

1) Is this a browser issue? I tested this on Firefox and Chrome and found the issue in both, but when I tested on a version of IE (don't remember which, it was at work) it didn't seem to happen at all.

2) Is there an elegant best practices method to resolve this issue? I found that adding about 20px padding to the right side of the div gets rid of the issue by giving the scrollbar enough breathing room to push into, but of course when the table isn't populated with enough data to cause overflow the padding still remains as an unsightly 20px whitespace gap. There seem to be a lot of similar ways to address the issue (like adding an empty table column the width of the scrollbar, setting overflow-y:scroll which causes there to ALWAYS be a vertical scrollbar, or setting a hardcoded width on the outer table), but they all seem to have their own advantages and disadvantages. Ultimately I wrote a javascript function that onload adds padding to the inner table whenever there's a vertical scrollbar, but it really seems like overkill to me for an issue I don't think should even be happening in the first place.

UPDATE: 1) I need to keep the ability to overflow on the y axis. There is other data on the page besides the tables, so the tables need to be vertically scrollable whenever too much data is generated for them. However, this of courses the horizontal scroll problem.

Answers

Adding a padding-right:20px; seems to do the trick for me on firefox

<table style="border: 2px solid blue;">
    <tr>
        <td>
            <div style="overflow: auto; border: 2px solid orange; height: 200px;">
                <table style="border: 2px solid green;">
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                </table>
            </div>
        </td>
    </tr>
</table>

Related