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

Answer 1

You can try with simples way

BODY {
    overflow-x:hidden;
}

Answer 2

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;
}

Answer 3

作为@ micadelli的答案的替代，您可以删除width: 100%因为<div class="test">是块级元素，并将自动填充它在当前容器中占用的水平空间。

Answer 4

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

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

Answer 5

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.