HTML表格复杂标题

Question

我对网络开发很陌生，所以请原谅我可能的愚蠢。我有一个小展示的东西。我有一张桌子，里面有一张桌子作为 tds 之一。我希望它的内部表格部分有一个复合标题。在下面的示例中，标题将是爱好，而在其下方的爱好表的标题将是 NUMBER、HOBBY 和DESCRIPTION。因此，如果您查看整个表格，标题是姓名、姓氏、工作，然后是更高级别的 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>

/th