Hide horizontal scrollbar

Question

I have a problem with the horizontal scrollbar. I don't want it to show up. Actually it only shows up in Chrome and it doesn't in Internet Explorer. What can I do? I have tried modifying width and padding in the css class, but this changes the layout as well. The content inside test is dynamic so it can overflow vertically, and this is fine because I only don't want horizontal scrollbar.

HTML:

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

CSS:

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

here is a fiddle if you need it: http://jsfiddle.net/XLY9L/

Thanks

Please change question title, as it does not express your problem. — Dmytro Grynets, May 03 '18 at 14:36

micadelli · Accepted Answer · 2013-04-03T08:54:09.807

8

There's a simple solution for this, just add this to your CSS declaration:

box-sizing: border-box;

The reason for horizontal scrollbar appears is that padding and border is by default added to whatever width you give to your element. By setting it explicitly to border-box, the padding and border are included in that width value.

This property is supported in IE8+, FireFox 19+ (by using -moz-box-sizing) and iOS Safari and Android (by using -webkit-box-sizing)

Also, I strongly suggest using shorthand css, as follows:

.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}

edited Apr 03 '13 at 08:54

answered Apr 03 '13 at 08:42

micadelli

2,482
6
26
38

thanks. I only add to add -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; to make it compatible with my browser. – Gyonder Apr 03 '13 at 08:55
Rock on! That's all you need to get full support – micadelli Apr 03 '13 at 08:56

score 8 · Answer 2 · answered Apr 03 '13 at 09:01

8

You can try with simples way

BODY {
    overflow-x:hidden;
}

answered Apr 03 '13 at 09:01

Michał Wrotkowski

117
2

score 3 · Answer 3 · answered Apr 03 '13 at 08:46

3

Alternatively to @micadelli's answer, you could remove the width: 100% because <div class="test"> is a block-level element and will automatically fill the horizontal space that it's occupying in the current container.

answered Apr 03 '13 at 08:46

Amy

7,388
2
20
31

2

`box-sizing` has its place, but this is the correct solution. Adding 100% width to a block-level element just introduces a bunch of issues, so it is important to understand *why* it's not required. Also, if IE7 support is needed (urgh), then `box-sizing` is a non-starter. – CherryFlavourPez Apr 03 '13 at 09:03
I agree that this is the answer **if** there's no special reason for setting its width to 100% manually. – micadelli Apr 03 '13 at 09:06
@micadelli - based on the reduced case provided then, this is the simplest solution. I'm curious as to when you'd choose to set the `width` to 100% manually? – CherryFlavourPez Apr 03 '13 at 09:08
@CherryFlavourPez I must admit I didn't figure out a simple case when to use that 100% :) But what I really meant was *if width is not explicitly needed to set to whatever %'s* – micadelli Apr 03 '13 at 09:12
@micadelli Absolutely - amending the box model for *everything* ([* FTW](http://paulirish.com/2012/box-sizing-border-box-ftw/)) would almost certainly make the OP's life easier going forward. For responsive sites I've found it's the only option. But even in that case, you **would not** explicitly set the width to 100% - it's not doing anything. – CherryFlavourPez Apr 03 '13 at 09:17
True, it's only complicating things, imho. Amen! – micadelli Apr 03 '13 at 09:26

score 3 · Answer 4 · answered Oct 26 '15 at 07:36

3

Add this code to your CSS. It will disable your horizontal scroll bar.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

answered Oct 26 '15 at 07:36

vasanth

715
8
18

1

Yes as it will also disable scrolling. We want to be able to scroll horizontally. This disables that. – Radmation Aug 08 '17 at 00:22

score 0 · Answer 5 · answered Apr 03 '13 at 09:55

0

you can also try this simple css code in you website. just write overflow-x:hidden; on body tag. it will be hide from your body.

answered Apr 03 '13 at 09:55

Ihsan Khattak

29
7

Hide horizontal scrollbar

5 Answers5

Linked