HTML 테이블의 복잡한 헤더

Question

임 꽤 웹 개발자에게 새로운, 그래서 내 어리 석음을 변명하십시오. ive는 작은 전시물을 얻었습니다. 나는 그 안에 테이블이있는 테이블을 가지고있다. 내부 표의 일부가 복합 표제처럼 보이기를 바랍니다. 아래의 예에서 제목은 Hobbies이고, 그 아래에는 NUMBER, HOBBY 및 DESCRIPTION이 될 취미 테이블의 제목이 있습니다. 그래서 표 전체를 보면 표제는 성, 이름, 직업, 그리고 상위 수준의 하위 표제와 첫 번째 표제와 같은 수준입니다. 나는 이것이 의미가 있기를 바랍니다. 어떻게 이런 식으로 할 수 있습니까?

<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

이런 식으로 뭔가요? 더 나은 스타일하지만 당신은 아이디어를 얻을 수 있습니다 ... 당신은 당신이 제목이

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>

/