Table with Tabs - Pure CSS

An easy tab-system without any Javascript!

by Aaron von Schassen

HTML

<div class="main">
  <section name="Standarfarben">
    <input type="radio" name="tabs" checked>
    <h4>Standardfarben</h4>    
    <table>
      <tr>
        <td>Apfelgrün</td>
        <td>Apfelgrün</td>
        <td>Aubergine</td>
        <td>Aubergine</td>
      </tr>
      <tr>
        <td>Babypink</td>
        <td>Babypink</td>
        <td>black</td>
        <td>schwarz</td>
      </tr>
    </table>
  </section>
  
  
  <section name="Section 2">
    <input style="width: 84px;" type="radio" name="tabs">
    <h4>Section 2</h4>    
    <table>
      <tr>
        <td>bla bla</td>
        <td>bla bla</td>
        <td>bla bla2</td>
        <td>bla bla2</td>
      </tr>
      <tr>
        <td>bla bla3</td>
        <td>bla bla3</td>
        <td>bla bla4</td>
        <td>bla bla4</td>
      </tr>
    </table>
  </section>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.main {
  margin: 5px;
}

.main > section {
  display: inline-block;
}

table {
  border-collapse: collapse;
  width: calc(100% - 10px);
  text-align: center;
  background-color: white;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
  z-index: 4;
  display: none;
  position: absolute;
  left: 5px;
}

input[name="tabs"] {
  width: 130px;
  height: 30px;
  position: absolute;
  z-index: 5;
  cursor: pointer;
  opacity: 0;
}

input[name="tabs"]:checked ~ table {
  display: table;
}

section > h4 {
  background: white;
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
  z-index: 1;
}