Click Checkbox to change content of table cells - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

Click Checkbox to change content of table cells

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">
input[type=checkbox] {
   display:block;
   visibility:hidden;
   width:0;
   margin:0;
   cursor:pointer;
}

input[type=checkbox]:after {
   position:fixed;
   left:0;
   display:block;
   visibility:visible;
   width:11%;
   padding:.6em 0;
   text-align:center;
}

input[type=checkbox]:after {
   content:"Data 2";
   background:Chartreuse;
}

input[type=checkbox]:checked:after {
   content:"Data 3";
   background:yellow;
}

aside input[type=checkbox]:checked~main table td:before {
   content:attr(data-two);<!--from   w w  w . j  av a  2  s. c  om-->
}

td:before {
   display:block;
   content:attr(data-one);
}
</style> 
 </head> 
 <body> 
  <aside> 
   <input type="checkbox"> 
   <main> 
    <table> 
     <caption>
       Lorem i 
     </caption> 
     <tbody> 
      <tr> 
       <td data-one="Data One" data-two="Data 2"></td> 
      </tr> 
     </tbody> 
    </table> 
   </main> 
  </aside> 
  <main> 
   <table> 
    <caption>
      Lorem i 
    </caption> 
    <tbody> 
     <tr> 
      <td data-one="Data One" data-two="Data 2"></td> 
     </tr> 
    </tbody> 
   </table> 
  </main>  
 </body>
</html>

Related Tutorials