Hide horizontal scrollbar

Question

I have a problem with the horizontal scrollbar. I do not want him to appear. In fact, it only displays in Chrome, and it does not work in Internet Explorer. What can I do? I tried modifying the width and padding in the css class, but that also changes the layout. The internal content test is dynamic, so it can overflow vertically, and that’s fine, because I don’t want a horizontal scroll bar.

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 the fiddle if you need it: http://jsfiddle.net/XLY9L/

thanks

Answer 1

For this a simple solution, just add this to your CSS declaration:

 box-sizing: border-box; 

The reason for the horizontal scrollbar to appear is because the add and border are added by default to whatever width you give the element. By setting it explicitly to the border-box , the append and border are included in this width value.

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

In addition, I highly recommend using css shorthand as follows:

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

Answer 2

You can try with a simple way

 BODY { overflow-x:hidden; } 

Answer 3

As an alternative to @micadelli's answer, you can remove width: 100% because <div class="test"> is a block level element and automatically fills the horizontal space that it occupies in the current container.

Answer 4

Add this code to your CSS. It will disable your horizontal scrollbar.

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

Answer 5

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