Question

在我的HTML文档中，有两个表分别具有4行和1行。我想将第二个表的行放在第一个表的最后一行的顶部。我尝试使用z-index，但是重叠不正确

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table id="table1">
            <tr bgcolor="lightgreen">
                <th>NAME</th>
                <th>AGE</th>
                <th>DESIGNATION</th>
            </tr>
            <tr bgcolor="limegreen">
                <td>John</td>
                <td>25</td>
                <td>Front-End Developer</td>
            <tr>
            <tr bgcolor="lime">
                <td>Angelov</td>
                <td>24</td>
                <td>Back-End Developer</td>
            <tr>
            <tr bgcolor="limegreen">
                <td>Rishi</td>
                <td>25</td>
                <td>Full-Stack Developer</td>
            <tr>
            <tr bgcolor="lime">
                <td>Amy</td>
                <td>20</td>
                <td>Web Designer</td>
            <tr>
        </table>
        <br>
        <br>
        <br>
        <table id="table2">
            <tr bgcolor="lime">
                <td>Jackson</td>
                <td>20</td>
                <td>Database Administrator</td>
            <tr>
        </table>
    </body>
</html>

Answer 1

作为一个简单的示例，您可以将它们都绝对定位，以便第二张桌子位于第一张桌子的顶部？您可能需要添加更多的CSS样式以使表设计保持一致

#table1 {
position: absolute;
width: 253px;
}

#table2 {
position: absolute;
width: 253px;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table id="table1">
            <tr bgcolor="lightgreen">
                <th>NAME</th>
                <th>AGE</th>
                <th>DESIGNATION</th>
            </tr>
            <tr bgcolor="limegreen">
                <td>John</td>
                <td>25</td>
                <td>Front-End Developer</td>
            <tr>
            <tr bgcolor="lime">
                <td>Angelov</td>
                <td>24</td>
                <td>Back-End Developer</td>
            <tr>
            <tr bgcolor="limegreen">
                <td>Rishi</td>
                <td>25</td>
                <td>Full-Stack Developer</td>
            <tr>
            <tr bgcolor="lime">
                <td>Amy</td>
                <td>20</td>
                <td>Web Designer</td>
            <tr>
        </table>
        <table id="table2">
            <tr bgcolor="lightgreen">
                <th>NAME</th>
                <th>AGE</th>
                <th>DESIGNATION</th>
            </tr>
            <tr bgcolor="limegreen">
                <td>Jackson</td>
                <td>20</td>
                <td>Database Administrator</td>
            <tr>
        </table>
    </body>
</html>

HTML表中的行重叠

1 个答案: