Question

我是网络开发的新手，所以请原谅我可能的愚蠢。我有一个小显示器的东西。我有一张桌子，里面有一张桌子作为其中一张桌子。我希望它的内部表部分具有复合标题。在下面的例子中，标题是爱好，下面是业余爱好者表格的标题，即NUMBER，HOBBY和DESCRIPTION。因此，如果您查看整个表格，标题是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我想如果你想让标题从第二个表中单独移动

＆＃13;

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

＆＃13;

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

＆＃13;

/日

HTML表格复杂标题

1 个答案: