css - Can't force overflow-x: visible

Question

I have container with following styles:

overflow-y:auto;
overflow-x:visible;
position:relative;

Inside I have table with following styles:

position:relative;

For some reason I still see both scrollbars (x and y). I can't force x scrollbar to disappear. I can't put in to fiddle for now because of lots of scripts and so on but I will do it soon... Anyway when I check container in chrome it has overflow-x: visible and scrollbar is visible - how it is possible???

edit -----------------

Here is fiddle: http://jsfiddle.net/Ncd2Y/1/ why x scrollbar is visible???

Guys I want the content to be visible on x axis... Content has to be visible (outside container) and scrollbar not visible...

Answer 1

it is visible because its css property is visible

.css({"overflow-y":"hidden","overflow-x":"hidden"});

will remove all scrollbars.

your css:

#container {
background:green;

width:100px;
height:100px;
display:block;
overflow-y:auto;
overflow-x:hidden;

}​</p>

to achieve your final goal, you should exclude the table from the container and positionin it absolute above and z index it lower than the table: see your updated fiddle:

http://jsfiddle.net/Ncd2Y/2/

your workarround css

#container {
background:green;
position:absolute;
width:100px;
height:100px;
display:block;
overflow-y:auto;
overflow-x:hidden;
word-wrap: break-word;
z-index: -10;

}​</p>

and worarround html:

  <div id="container">

</div>
 <table id="table">
        <tbody>
            <tr>
                <td>column</td>
                <td>column</td>
                <td>column</td>
                <td>column</td>
                <td>column</td>
                <td>column</td>
            </tr>
        </tbody>            
    </table>
​

Answer 2

overflow-x:hidden; 

will solve problem..

Answer 3

overflow-x: visible将导致内容可见。 overflow-x: hidden会隐藏它。

Answer 4

这对我有用。

不要浪费时间。尝试这个...

$(document).ready(function(){
    var bugfix = document.createElement('style')
    bugfix.innerHTML = "body {overflow-x: hidden !important;}";
    document.body.appendChild(bugfix);
  });