HTML header complex header

Question

Im довольно новый для веб-разработчиков, поэтому, пожалуйста, извините мою вероятную глупость. и у меня появилась небольшая вещь. У меня есть таблица со столом в ней как один из tds. Я хочу, чтобы внутренняя часть таблицы была похожа на композитный заголовок. В приведенном ниже примере заголовок будет Хобби, а под ним - заголовки таблицы хобби, которые будут NUMBER, HOBBY и ОПИСАНИЕ. Поэтому, если вы посмотрите на всю таблицу, заголовки - это NAME, SURNAME, JOB, а затем на уровне выше HOBBIES, а заголовки на том же уровне, что и первые. Я надеюсь в этом есть смысл. Как я могу достичь чего-то подобного

<table> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Surname</th> 
     <th>Job</th> 
     <th>Hobbies</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>John</td> 
     <td>McJohnson</td> 
     <td>Dentist</td> 
     <td> 
      <table> 
       <tbody> 
       <tr> 
        <td>1</td> 
        <td>Lego</td> 
        <td>I like to play Lego</td> 
       </tr> 
       </tbody> 
      </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

Что-то вроде этого? может быть стилизовано лучше, но вы получите идею ... Вы должны будете использовать JS Я думаю, если вы хотите, чтобы заголовок перемещается вверх отдельно от второй таблицы

td table{display:none;} 
 
tr td:nth-child(4){background-color:gray;} 
 
td:hover table{position:absolute;left:200px;background-color:yellow;display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Surname</th> 
 
     <th>Job</th> 
 
     <th>Hobbies</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>McJohnson</td> 
 
     <td>Dentist</td> 
 
      <td>Hover Me 
 
     
 
      <table> 
 
       <thead> 
 
       <tr> 
 
        <th>Number</th> 
 
        <th>Hobby</th> 
 
        <th>Comment</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
        
 
      
 
       <tr> 
 
        <td>1</td> 
 
        <td>Lego</td> 
 
        <td>I like to play Lego</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>McJohnson</td> 
 
     <td>Dentist</td> 
 
      <td>Hover Me 
 
     
 
      <table> 
 
       <thead> 
 
       <tr> 
 
        <th>Number</th> 
 
        <th>Hobby</th> 
 
        <th>Comment</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
        
 
      
 
       <tr> 
 
        <td>1</td> 
 
        <td>Lego</td> 
 
        <td>I like to play Lego</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

/й