HTML table with rows and columns that can be sized independently of cell content - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

HTML table with rows and columns that can be sized independently of cell content

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">
table {<!--   w  w w .  ja va  2s . c o  m-->
   border-width:2px;
   border-style:none none solid solid;
}

th, td {
   border-width:2px;
   border-style:solid solid none none;
   overflow:hidden;
}

.top, .side, .main {
   position:relative;
   width:51px;
   height:19px;
}

td span {
   position:absolute;
   top:0px;
}

.c3 {
   width:26px;
}

.r4 {
   height:11px
}
</style> 
 </head> 
 <body> 
  <table class="atable" cellspacing="0" cellpadding="0" style="font-size: 10pt"> 
   <thead> 
    <tr> 
     <th> 
      <div class="top r1 c1">
        Lorem ips 
      </div> </th> 
     <th> 
      <div class="top r1 c2">
        Lorem ips 
      </div> </th> 
     <th> 
      <div class="top r1 c3">
        Lorem ips 
      </div> </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th> 
      <div class="side r2 c1">
        Lorem ips 
      </div> </th> 
     <td style="
              vertical-align: bottom
            "> 
      <div class="main r2 c2"> 
       <span style="
              font-size:6pt;
              background-color: red;
            ">L</span> 
      </div> </td> 
     <td> 
      <div class="main r2 c3"> 
       <span style="
              font-size:6pt;
              background-color: blue;
            ">L</span> 
      </div> </td> 
    </tr> 
    <tr> 
     <th> 
      <div class="side r3 c1">
        Lorem ips 
      </div> </th> 
     <td> 
      <div class="main r3 c2"> 
       <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">L</span> 
      </div> </td> 
     <td> 
      <div class="main r3 c3"> 
       <span style="
              font-size:30pt;
              background-color: green;
            ">L</span> 
      </div> </td> 
    </tr> 
    <tr> 
     <th> 
      <div class="side r4 c1">
        Lorem ips 
      </div> </th> 
     <td> 
      <div class="main r4 c2"> 
       <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">L</span> 
      </div> </td> 
     <td> 
      <div class="main r4 c3"> 
       <span style="
              font-size:6pt;
              background-color: blue;
            ">L</span> 
      </div> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials