A Pen by teamgroove.

index.html

 <div class="container highlight2">

<fieldset class="activate">
  

  <input type="radio" id="c11" name="c1" value="1" checked="checked"/>  <label for="c11">hello</label>
<input type="radio" id="c12" name="c1" value="2"/>
  <label for="c12">hello</label>
<input type="radio" id="c13" name="c1" value="3"/> <label for="c13">hello</label>

  
  
<input type="radio"  id="c21" name="c2" value="1" checked="checked"/><label for="c21">hello</label>
  
<input type="radio" id="c22" name="c2" value="2"/><label for="c22">hello</label>
 
<input type="radio" id="c23" name="c2" value="3"/> <label for="c23">hello</label>
 
  
  
<input type="radio" id="c31" name="c3" value="1" checked="checked"/><label for="c31">hello</label>
   
<input type="radio" id="c32" name="c3" value="2"/><label for="c32">hello</label>
  
<input type="radio" id="c33" name="c3" value="3"/> <label for="c33">hello</label>
 
<table border="0" cellspacing="0" cellpadding="0">
  <!-- thead start -->
  <thead>
  <tr>
    <td>
      <i><p>Professional <span>completely free 30-day trial</span></p>
        <p>0,-</p>
        <a href="#">signup</a>
      </i>
      <i><p>Professional <span>monthly</span></p><p>2,99</p>
      <a href="#">signup</a>
      </i>
      <i><p>Professional <span>yearly</span</p><p>3,99</p>
        <a href="#">signup</a>
        </i>
        
    </td>

    <td>
      <i><p>Professional <span>completely free 30-day trial</span></p>
        <p>3,99,-</p>
        <a href="#">signup</a></i>
      <i><p>Professional <span>completely free 30-day trial</span></p>
        <p>7,99,-</p>
        <a href="#">signup</a></i>
      <i><p>Professional <span>completely free 30-day trial</span></p>
        <p>12,99,-</p>
        <a href="#">signup</a></i>
    
    </td>

      <td>
      <i><p>Professional <span>completely free 30-day trial</span></p> <p>2,99,-</p>
        <a href="#">signup</a></i>
      <i><p>Professional <span>completely free 30-day trial</span></p> <p>5,99,-</p>
        <a href="#">signup</a></i>
      <i><p>Professional <span>completely free 30-day trial</span></p> <p>12,99,-</p>
        <a href="#">signup</a></i>
    
    </td>

  </tr>
</thead>
    <!-- thead end -->
  
  <!-- 1. tbody start -->
  <tbody>
    
  <!-- 1. row start -->  
  <tr>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>

     <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
  </tr>
      <!-- 2. row start -->  
  <tr>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>

     <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
  </tr>  
    
 
</tbody>
  <!-- 1. tbody end -->
  
  
  
</table>
<label for="button" onclick>click / touch: open sesame!</label>
    
    <input type="checkbox" id="button" />

 
  <table>
   
      <!-- 1. tbody start -->
  <tbody>
    
  <!-- 1. row start -->  
  <tr>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>

     <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
  </tr>
      <!-- 2. row start -->  
  <tr>
    <td>
      <i>bla</i>
      <i>bla</i>
      <i>bla</i>
    
    </td>
    <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>

     <td>
      <i>one</i>
      <i>two</i>
      <i>three</i>
    
    </td>
  </tr>  
</tbody>
  <!-- 1. tbody end -->
  </table>
  
  
  
  
</fieldset>
  
  
  
  </div>

multi-state-product-table-without-js.markdown

multi-state product table without js

A Pen by teamgroove on CodePen.

License.

style.less

@tablewidth: 990px;
@tablenumcol: 3;
@tableswitchnum: 3;
@tableswitchtop: 150px;
@tableswitchheightelem: 25px;
@tableswitchheight: 150px; 
@tableswitchheightelem: @tableswitchheight*@tableswitchnum;
@tabletheadheight: 180px;
@tablepriceheight: 100px;
@colwidth: @tablewidth/@tablenumcol;


body {
margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #333;
}
 
.container {
  width: 100%;

  display: block;
}

fieldset.activate {
  margin:0px;
  padding: 0px;
  border: 0px;

  width: @tablewidth;
     margin-left:auto; 
    margin-right:auto;
  height: auto;
  
}
 
  input[type="radio"] {
   position: absolute;
   top: -9999px;
   left: -9999px;
    position: absolute;

    z-index: 2;

  }

input + label {
  position: absolute;
    float: left;
    display: inline;
  background-color: #00ff00;
  }

input:checked + label {
  background-color: #ff0000;
  }

table 
{
  
  &:hover {
   
  }
  width: @tablewidth;
  background: none;
  border: 0px;

   margin-left:auto; 
    margin-right:auto;
  
  
  
  thead {
    tr:nth-child(1) {
    height:190px;
  }
  }

   td {
     vertical-align: top;
     width: 33%;
   }
}
 
 
  
  i {
  display: block;

    width:100%;
    font-style: normal;
    
    & p {
      margin: 0;
      padding: 0;
      
    }
  }

/* top */
input[type=radio]:nth-of-type(3n+1),label:nth-of-type(3n+1)  {
  top: @tableswitchtop+20px;
}
input[type=radio]:nth-of-type(3n+2),label:nth-of-type(3n+2){
   top: @tableswitchtop+40px; 
}
input[type=radio]:nth-of-type(3n+3),label:nth-of-type(3n+3) {
   top: @tableswitchtop+60px;
}

/* left */
  input[type=radio]:nth-of-type(1),input[type=radio]:nth-of-type(2),input[type=radio]:nth-of-type(3), label:nth-of-type(1),label:nth-of-type(2),label:nth-of-type(3){
margin-left:0px;
}

input[type=radio]:nth-of-type(4),input[type=radio]:nth-of-type(5),input[type=radio]:nth-of-type(6),label:nth-of-type(4),label:nth-of-type(5),label:nth-of-type(6){
margin-left:@colwidth; 
}

input[type=radio]:nth-of-type(7),input[type=radio]:nth-of-type(8),input[type=radio]:nth-of-type(9),label:nth-of-type(7),label:nth-of-type(8),label:nth-of-type(9){
margin-left:@colwidth*2; 
}


/* toggle */

input[type="radio"] ~ table tr td  i {
display: none;
}
 


input:nth-of-type(1)[type="radio"]:checked ~ table tr td:nth-child(1) i:nth-child(1) {
    display: block;
}
input:nth-of-type(2)[type="radio"]:checked ~ table tr td:nth-child(1) i:nth-child(2) {
    display: block;
}
input:nth-of-type(3)[type="radio"]:checked ~ table tr td:nth-child(1) i:nth-child(3) {
    display: block;
}




input:nth-of-type(4)[type="radio"]:checked ~ table tr td:nth-child(2) i:nth-child(1) {
    display: block;
}
input:nth-of-type(5)[type="radio"]:checked ~ table tr  td:nth-child(2) i:nth-child(2) {
    display: block;
}
input:nth-of-type(6)[type="radio"]:checked ~ table tr  td:nth-child(2) i:nth-child(3) {
    display: block;
}

input:nth-of-type(7)[type="radio"]:checked ~ table tr td:nth-child(3) i:nth-child(1) {
    display: block;
}
input:nth-of-type(8)[type="radio"]:checked ~ table tr  td:nth-child(3) i:nth-child(2) {
    display: block;
}
input:nth-of-type(9)[type="radio"]:checked ~ table tr  td:nth-child(3) i:nth-child(3) {
    display: block;
}

input[type="radio"]:checked  label {
  background-color:#ff0000;
}


/* checkbox hack*/

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
 


input[type=checkbox] ~ table {
  display: none;
}

input[type=checkbox]:checked ~ table {
 display: table;
}

/* styling */

fieldset.activate table {
  
  
  
  thead {
    
 
    
     i {
  	background-color: #eee;
	background-image: -moz-linear-gradient(#fff,#eee);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
	background-image: -webkit-linear-gradient(#fff, #eee);
	background-image: -o-linear-gradient(#fff, #eee);
	background-image: -ms-linear-gradient(#fff, #eee);
	background-image: linear-gradient(#fff, #eee);
	height: @tabletheadheight+100px;
       
       p {
         text-align: center;
       }
       
       p:nth-of-type(1) {
       font-size:20px;
         text-align: center;
         display: block;
         
         span {
           display: block;
           font-size:14px;
         }
       }
     
     p:nth-of-type(2) {
       text-align: center;
       display: block;
	font: bold 25px/100px Georgia, Serif;
      
	color: #777;
	background: #fff;
	border: 5px solid #fff;
	height: @tablepriceheight;
	width: 100px;
	margin: 10px auto;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
       clear:both;
     }
     
     a {
        
       
    position: relative;

	padding: 8px 20px;
	margin: @tableswitchheight 50px 0 50px;  
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
       text-align: center;
	display: block;       
	background-color: #72ce3f;
	background-image: -moz-linear-gradient(#72ce3f, #62bc30);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
	background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
	background-image: -o-linear-gradient(#72ce3f, #62bc30);
	background-image: -ms-linear-gradient(#72ce3f, #62bc30);
	background-image: linear-gradient(#72ce3f, #62bc30);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;     
	text-shadow: 0 1px 0 rgba(0,0,0,.3);        
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
        
       &:hover {
         background-color: #62bc30;
	background-image: -moz-linear-gradient(#62bc30, #72ce3f); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
	background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
	background-image: -o-linear-gradient(#62bc30, #72ce3f);
	background-image: -ms-linear-gradient(#62bc30, #72ce3f);
	background-image: linear-gradient(#62bc30, #72ce3f); 
       }
  
     }
     
   
     
   } 
    
    & td:first-child i {
     
      border-radius: 5px 0 0 0;
    }
    
    & td:last-child i {
     
      border-radius: 0 5px 0 0;
    }
  }
  
  tbody {
    
    tr {
      
      td {
        
    
    background-color: #FFFFFF;
    
      }
    }
    
  }
  
}

label[for=button] {
   position:relative;
    float: left;
    display: inline;
  background-color: #ff0000;
   top:0px; 
  }