CSS无法创建水平滚动条

I have CSS sheet which fails to create a horizontal scroll bar when the table width is greater than 800px wide.

我有CSS表格，当表格宽度大于800px宽时，无法创建水平滚动条。

CSS looks like:

CSS看起来像：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

html, body {
max-width : 800px;
margin-left:auto;
margin-right:auto;
}

body
{
background-color:#000000;
}

#content {
position:relative;
z-index:1;
}

#header
{
position:relative;
background-image: url(http://img.photobucket.com/albums/v224/Tahira/HARPALGETMENERDS4.jpg); 
padding: 110px;
background-repeat:no-repeat;
background-position: 52% 0%;
}
#header h1.bottom {margin: -100px;}

#header2
{
position:relative;
margin-top: -70px;
margin-left: -40px;
background-position: 0% 0%;
}

#container
{
background: #ffffff;
}



table, td, th
{
width: 800px;   
overflow: auto;
overflow-y: hidden;  
scrollbar-base-color:#ffeaff
font-size: 93%;
font-family:Calibri;
border-collapse:collapse;
border-bottom: 1px solid #fff;
}
th
{
background-color:#6293d9;
color:#d1d9ec;
}
td
{
background-color:#e8edff;
color:#0059ff;
}

...
</style>

3 个解决方案

#1

try to wrap your table inside a

尝试将你的桌子包裹在里面

<div style="width:800px; overflow-x:auto;">
    <table>...</table>
</div>

#2

You need to remove this:

你需要删除这个：

overflow-y: hidden;

That means that when it overflow horrozontally it will just hide the content rather than show a scroll bar.

这意味着当它在horrozontally溢出时，它只会隐藏内容而不是显示滚动条。

#3

Example on jsFiddle.com

jsFiddle.com上的示例

 div.scroll{
    width: 800px;   
    overflow:auto;
    overflow-y: hidden;  
    }
    table
    {
    scrollbar-base-color:#ffeaff
    font-size: 93%;
    font-family:Calibri;
    border-collapse:collapse;
    border-bottom: 1px solid #fff;
    }
    th
    {
    background-color:#6293d9;
    color:#d1d9ec;
    }
    td
    {
    background-color:#e8edff;
    color:#0059ff;
    }
    </style>
  </head>
  <body>
    <div class="scroll">
        <table>
            <tr>
                <td>test</td><td>test</td> ... <td>test</td>
            </tr>
            <tr>
                <td>test</td><td>test</td> ... <td>test</td>
            </tr>
        </table>
    <div>
  </body>
</html>

#1