CSS 无法创建水平滚动条答案

【问题标题】：CSS fails to create a horizontal scroll barCSS 无法创建水平滚动条
【发布时间】：2010-07-27 03:36:24
【问题描述】：

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

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>

【问题讨论】：

您在 CSS 上为表格设置了固定宽度。它永远不会比其中的表声明大。
但确实如此，该表比在 800px 处定义的表头还要大

标签： css

【解决方案1】：

试着把你的桌子包在一个

里面

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

【讨论】：

【解决方案2】：

你需要删除这个：

overflow-y: hidden;

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

【讨论】：

【解决方案3】：

Example on 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>

【讨论】：