Resizing a table-layout: fixed table - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Size

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

Description

Resizing a table-layout: fixed table

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor </title> 
  <style>
* {<!--  ww  w.  ja v a  2  s.  c  o m-->
   box-sizing:border-box;
}

html, body {
   padding:0;
   margin:0;
   font-family:sans-serif;
}

.wrap {
   width:351px;
   display:inline-block;
}

table {
   table-layout:fixed;
   border-collapse:collapse;
   width:100%;
}

th, td {
   border-right:2px solid Chartreuse;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
}

th:last-of-type,
td:last-of-type {
   border-right:0;
}

th {
   text-align:left;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrap"> 
   <table> 
    <colgroup> 
     <col style="width: 50px;"> 
     <col style="width: 50px;"> 
     <col style="width: 50px;"> 
    </colgroup> 
    <thead> 
     <tr> 
      <th>Lorem ipsum dolor sit amet, consectetur adipiscing e</th> 
      <th>Lorem ips</th> 
      <th>Lorem</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Lorem i</td> 
      <td>Lorem </td> 
      <td>Lorem ipsu</td> 
     </tr> 
     <tr> 
      <td>Lorem ipsum dolo</td> 
      <td>Lorem ips</td> 
      <td>Lorem ip</td> 
     </tr> 
     <tr> 
      <td>Lorem i</td> 
      <td>Lorem ipsum dolor sit</td> 
      <td>Lorem ipsum </td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials