用数据制作同心正方形

Question

我已经制作了两个相互响应的正方形。现在我想在每个正方形内添加表格行。我在内部正方形内添加了表格，但我想在外部正方形（在外面的那个）内添加表格，并且希望数据在侧面进行调整，并且数据不应隐藏在内正方形下方。我在参考下方添加了图片。

下面是发布的代码。

<style>
    .square {
        background: pink;
        width: 45vw;
        height: 45vw;
        position:relative;
    }
    .square2 {
        background: red;
        width: 30vw;
        height: 30vw;
        position:absolute;
        margin-left:17%;
        margin-top:17%;
    }
</style>
<div class="square">
    <table id="myTable">
            <tr>
                <td><a href="">blah blah</a></td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>
                <td><a href="">blah blah</a></td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
        </table>
    <div class="square2">
            <table id="myTable">
            <tr>
                <td><a href="">blah blah</a></td>
                <td><a href="">blah blah</a></td>
                <td><a href="">blah blah</a></td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>

                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
            <tr>
               <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
                <td>blah blah</td>
            </tr>
        </table>
    </div>
</div>

Answer 1

你需要分开你的桌子。请看这个链接。检查它是否满足您的要求。

https://plnkr.co/edit/FoJ24ZqyWdJpRJoQuhXD?p=preview

#myTable2{
....
}