可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答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.

回答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>

CSS fails to create a horizontal scroll bar

问题:

回答1:

回答2:

回答3: