CSS無法創建水平滾動條

我的CSS表單無法在表格寬度大於800px寬時創建水平滾動條。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>

來源

2010-07-26 Phil

您對CSS的表格固定寬度的表格。它永遠不會比那裏的表格聲明更大。 – 2010-07-26 18:36:51

但它是，表是行軍大於在800px定義的標題還 – Phil 2010-07-26 18:39:04

嘗試包裹內

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

來源

2010-07-26 18:41:59 opatut

您需要刪除此：

overflow-y: hidden;

這意味着，當它溢出horrozontally它只是隱藏內容，而不是顯示滾動條。

來源

2010-07-26 18:39:28 smdrager

剛剛做過，仍然沒有好:( – Phil 2010-07-26 18:40:58

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>

來源

2010-07-26 19:03:34 JohnB

CSS無法創建水平滾動條

回答

相關問題