Firefox displays unnecessary horizontal scrollbar
Question
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?
2 answers
solution1
1 ACCPTED 2016-09-28 05:01:04
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.
solution2
0 2020-03-27 00:18:45
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.