HTML table 复杂 header

Question

我对网络开发还很陌生，所以请原谅我可能的愚蠢。我有一个小显示器。我有一个 table，里面有一个 table 作为 tds 之一。我希望它的内部 table 部分有一个复合标题。在下面的示例中，标题是爱好，在它下面是爱好 table 的标题，即 NUMBER、HOBBY 和 DESCRIPTION。因此，如果您查看整个 table，标题是 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 我想如果你想让标题从第二个 table

分开

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>

/次

HTML table 复杂 header

HTML table complex header

html

javascript

jquery

html-table