Tutorial :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>  


Solution:1

try to wrap your table inside a

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


Solution: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.


Solution: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>

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »