HTML 表复杂标头

HTML table complex header

本文关键字：复杂 HTML      更新时间：2023-09-26

我对Web开发很陌生，所以请原谅我可能的愚蠢。 我得到了一个小的显示器。我有一个表格，里面有一个表格作为 tds 之一。我希望它的内部表部分像一个复合标题。在下面的示例中，标题是爱好，下面是爱好表的标题，即编号、爱好和描述。因此，如果您查看整个表格，标题是姓名，姓氏，工作，然后在更高的爱好级别上，子标题与第一个标题处于同一级别。我希望这是有道理的。我怎样才能实现这样的事情

<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>

像这样的东西？ 可以更好地设计，但你明白了...你将不得不使用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>

/千

相关文章：