CSS не может создать горизонтальную полосу прокрутки - PullRequest
Новая
       7

CSS не может создать горизонтальную полосу прокрутки

2 голосов
/ 26 июля 2010

У меня есть лист CSS, который не может создать горизонтальную полосу прокрутки, когда ширина таблицы превышает 800 пикселей в ширину.

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 ]

0 голосов
/ 26 июля 2010

попробуйте обернуть ваш стол в 

<div style="width:800px; overflow-x:auto;">
    <table>...</table>
</div>
0 голосов
/ 26 июля 2010

Пример на 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>
0 голосов
/ 26 июля 2010

Вам необходимо удалить это: 

overflow-y: hidden;

Это означает, что при переполнении в горизонтальном направлении он просто скрывает содержимое, а не показывает полосу прокрутки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...