The effect I'm trying to achieve is this: I'd like to have a line of text with a title, and underneath that I want a table. The table is likely to be too high to fit in the browser window, so I'd like a vertical scrollbar if necessary. The table shouldn't be too wide, so no horizontal scrollbar should be needed (but I'd still like it to show up if necessary). Either way, I don't want the title to scroll; thus, a vertical scrollbar shows up and I scroll the table, the title should be fixed. I'm trying to set up a <div>
whose width is whatever width the browser decides is needed to display the table (the title will be less wide than that).
Here's what I've tried:
<html>
<head>
<title>Page title</title>
<style type="text/css">
.mytab { border-style: solid; border-collapse: collapse }
table.mytab td { border-style: solid; border-width : 1px;
padding: 5px }
</style>
</head>
<body>
<div style="display: inline-table">
<div style="padding-bottom: 10px; text-align: center">Table title</div>
<div style="height: 100px; overflow: auto">
<table class="mytab">
<tr><th/><th>Data1</th><th>Data2</th><th>Data3</th></tr>
<tr><td>AAAA</td><td>12348173</td><td>7598734</td><td>zioxuoiuf</td></tr>
<tr><td>BBBB</td><td>29834782</td><td>7895232</td><td>kuoiu2kjf</td></tr>
<tr><td>CCCC</td><td>98291123</td><td>io242o2</td><td>982734211</td></tr>
</table>
</div>
</div>
</body>
</html>
(I'll eventually want to allow more than 100px for the height of the table, but I set it so that I could test the scrollbar.)
This does what I want in Chrome (53.0.2785.116 m), but not in Firefox (49.0.1). In Chrome, it appears that the browser figures out how wide to make the table, then adds a vertical scrollbar to the right of that. In Firefox, it appears that the browser figures out how wide to make the table, but then positions the vertical scrollbar inside a box of that width, obscuring part of the table. Then it appends a horizontal scrollbar since you can't see all of the table.
Appearance with Chrome:
Appearance with Firefox:
(It doesn't matter to me that Firefox is displaying a bit less of the table vertically. But I definitely don't want the horizontal scrollbar to show up unless it's necessary.)
How can I fix this so it works in Firefox?
Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.
Nevertheless, you can still change that browser's scrollbar style to different alternatives within the browser's about:config (Advanced Preferences) menu. This is how you can customize Firefox's scrollbar style by changing a hidden flag on Firefox's Advanced Preferences tab.
use css overflow hidden on html, body and use a wrapper div with 100% height and width.
We have encountered this problem frequently in our work here. It seems that Mozilla simply renders differently than Chrome.
By inspection, I was able to fix the formatting problem by adding 16 pixels of right padding to the innermost <div>
which contains the table. As you can verify for yourself, this effectively adds enough space for the vertical scrollbar such that the horizontal scrollbar will not appear.
The only issue is that this pushes the scrollbar too far to the right in Chrome. So I added a check in the CSS to apply the style only to Mozilla browsers. I tested in Chrome and Mozilla and it looks fine.
<style type="text/css">
.mytab { border-style: solid; border-collapse: collapse }
table.mytab td { border-style: solid; border-width : 1px;
padding: 5px }
@-moz-document url-prefix() {
.moz-div { padding-right: 16px; }
}
</style>
<div class="moz-div" style="height: 100px; overflow: auto">
By the way, the problem in Mozilla also appears in IE (at least IE 10), so you should check across all browsers and devices, and update your CSS accordingly.
Not ideal, but here's a simpler option that might be good enough in most scenarios.
div {
overflow-x: hidden;
}
th:last-child,
td:last-child {
padding-right: 16px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With