html - 用数据做同心正方形

Question

我已经将两个响应式方 block 一个嵌入另一个。现在我想在每个方 block 内添加表格行。我在内部正方形内添加了表格，但我想在外部正方形(外部的那个)内添加表格，并希望数据在侧面进行调整，并且数据不应隐藏在内部正方形下方。我在引用下方添加了图片。

下面是贴出的代码。

<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

您需要拆分您的 table 。请参阅此链接。检查它是否满足您的要求。

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

#myTable2{
....
}