arrange table column in a single responsive column, number of dots depend on the length of text - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

arrange table column in a single responsive column, number of dots depend on the length of text

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <style>
td {<!--from ww  w. j a va  2 s . co  m-->
   overflow:hidden;
   vertical-align:bottom;
}

td:first-child:after {
   content:'';
   display:inline-block;
   width:100%;
   margin-right:-100%;
   border-top:dotted;
}

table {
   width:51%;
   background:linear-gradient(to right,lightgray,Chartreuse);
}

table, th, td {
   border:solid 2px
}
</style> 
 </head> 
 <body translate="no"> 
  <table class="table table-hover"> 
   <thead> 
    <tr> 
     <th>Lorem</th> 
     <th>Lorem</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consectetur adipisc</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit a</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consectetur adipiscing</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit a</td> 
     <td>Lorem ip</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consectetur adipiscing</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. M</td> 
     <td>Lorem i</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials