Выделение группы таблиц

by Daniel

HTML

<div class="wrapper">
  <table>
    <thead>
    
      <tr>
        <th class="empty"></th>
        <th colspan=2> Группа 1 </th>
        <th colspan=3> Группа 2 </th>
      </tr>
      
      <tr>
        <th>Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
        <th>Заголовок 4</th>
        <th>Заголовок 5</th>
        <th>Заголовок 6</th>
      </tr> 
      
    </thead>
      <tbody>
      
         <tr>
          <td>Ячейка 1.1</td>
          <td>Ячейка 1.2</td>
          <td>Ячейка 1.3</td>
          <td>Ячейка 1.4</td>
          <td>Ячейка 1.5</td>
          <td>Ячейка 1.6</td>
        </tr>
        
        <tr>
          <td>Ячейка 2.1</td>
          <td>Ячейка 2.2</td>
          <td>Ячейка 2.3</td>
          <td>Ячейка 2.4</td>
          <td>Ячейка 2.5</td>
          <td>Ячейка 2.6</td>
        </tr>  

        <tr>
          <td>Ячейка 3.1</td>
          <td>Ячейка 3.2</td>
          <td>Ячейка 3.3</td>
          <td>Ячейка 3.4</td>
          <td>Ячейка 3.5</td>
          <td>Ячейка 3.6</td>
        </tr>

        <tr>
          <td>Ячейка 4.1</td>
          <td>Ячейка 4.2</td>
          <td>Ячейка 4.3</td>
          <td>Ячейка 4.4</td>
          <td>Ячейка 4.5</td>
          <td>Ячейка 4.6</td>
        </tr>
        
        <tr>
          <td>Ячейка 5.1</td>
          <td>Ячейка 5.2</td>
          <td>Ячейка 5.3</td>
          <td>Ячейка 5.4</td>
          <td>Ячейка 5.5</td>
          <td>Ячейка 5.6</td>
        </tr>
        
        <tr>
          <td>Ячейка 6.1</td>
          <td>Ячейка 6.2</td>
          <td>Ячейка 6.3</td>
          <td>Ячейка 6.4</td>
          <td>Ячейка 6.5</td>
          <td>Ячейка 6.6</td>
        </tr>
    </tbody>
  </table>
</div>

CSS

table{
  border-collapse: collapse;
  border-spacing: 0;
  
  margin: 0 auto;
}

th, td{
  text-align: center;
  vertical-align: center;
  
  border: 1px solid #99f;
  
  padding: 3px;
}

.empty{
  border: none;
}

.hover{
  background-color: #99f;
}