Html table width on mobile - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Width

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

Description

Html table width on mobile

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">
.price {<!--  w  ww. j  a  va 2s  .c o m-->
   width:56px;
}

.minutes {
   width:81px;
}

.descriptions {
   width:auto;
   word-break:break-all;
}
</style> 
 </head> 
 <body> 
  <table class="Titel1"> 
   <tbody> 
    <tr> 
     <td class="descriptions">Lorem ipsum dol</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, c</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolo</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit ame</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, consectetu</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, consect</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, consecte</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor si</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, conse</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ip</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, consectetur adi</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, co</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
    <tr> 
     <td class="descriptions">Lorem ipsum dolor sit amet, co</td> 
     <td class="minutes">Lorem ipsu</td> 
     <td class="price">Lorem i</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials