HTML Display table to fit screen size - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Size

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

Description

HTML Display table to fit screen size

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.image-section {<!--  ww w .  j  ava 2  s .  co m-->
   width:71%;
}

.item {
   width:21%;
   float:left;
   overflow:hidden;
   text-align:center;
   box-sizing:border-box;
   padding:0 11px;
   margin-bottom:11px;
}

.item:nth-child(6n) {
   clear:both;
}

.image {
   width:100%;
   max-width:100%;
}
</style> 
 </head> 
 <body translate="no"> 
  <section class="image-section"> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="image"> 
    <h2 class="title">Lorem ipsum dolor sit amet, co</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
   <div class="item"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="image"> 
    <h2 class="title">Lorem ipsum</h2> 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials