Сделайте концентрический квадрат с данными

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{ 
.... 
}