Make table container smaller than table with scroll bar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Scroll

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Scroll

Description

Make table container smaller than table with scroll bar

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.Container<!--  w  ww. j  a v a  2s  .  co  m-->
 {
   height:100px;
   width:151px;
   overflow-x:scroll;
   overflow-y:scroll;
}

.Content
{
}
table,tr,td,th
 {
   border:2px solid Chartreuse;
   padding:3px;
}

.name
 {
   white-space:nowrap;
}
</style> 
 </head> 
 <body> 
  <div class="Container"> 
   <div class="Content"> 
    <table> 
     <tbody> 
      <tr> 
       <th>Lo</th> 
       <th class="name">Lore</th> 
       <th>Lorem ipsum d</th> 
       <th>Lorem ip</th> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td class="name">Lorem ipsum d</td> 
       <td>Lorem ipsum dolor </td> 
       <td>Lorem ipsum</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td class="name">Lorem ipsum d</td> 
       <td>Lorem ipsum dolor </td> 
       <td>Lorem ipsum</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td class="name">Lorem ipsum d</td> 
       <td>Lorem ipsum dolor </td> 
       <td>Lorem ipsum</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td class="name">Lorem ipsum d</td> 
       <td>Lorem ipsum dolor </td> 
       <td>Lorem ipsum</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td class="name">Lorem ipsum d</td> 
       <td>Lorem ipsum dolor </td> 
       <td>Lorem ipsum</td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials