CSS fails to create a horizontal scroll bar

Question

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

CSS looks like:

<!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>

You have a fixed width on the CSS for table. It will never be larger than that with the table declaration in there. — Dustin Laine
– Dustin Laine, Commented Jul 26, 2010 at 18:36
but it is, the table is march larger than the header which is defined at 800px also — Phil
– Phil, Commented Jul 26, 2010 at 18:39

opatut · Accepted Answer · 2010-07-26 19:36:24Z

0

try to wrap your table inside a

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

edited Jul 26, 2010 at 19:36

answered Jul 26, 2010 at 18:41

opatut

6,8745 gold badges34 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smdrager · Accepted Answer · 2010-07-26 18:39:28Z

0

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.

answered Jul 26, 2010 at 18:39

smdrager

7,4276 gold badges41 silver badges50 bronze badges

Comments

JohnB · Accepted Answer · 2010-07-26 19:03:34Z

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>

Collectives™ on Stack Overflow

CSS fails to create a horizontal scroll bar

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related