CODEWITHSUNDEEP
htmlcsshtml-tableresponsive
smarttechy
smarttechy

Reputation: 902

Make concentric square with data

I have made two responsive squares one inside another. Now I want to add table rows inside each square. I have add table inside inner square but I want to add table inside outer square (the one which is outside) and want data to adjust in sides and data should not hidden below inner square. I have added image below reference.

enter image description here

Below is the code posted. 

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

Upvotes: 0

Views: 362

Answers (1)

Sharmila
Sharmila

Reputation: 795

You need to split up your table. Please see this link. Check whether it satisfies your requirement.

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

#myTable2{
....
}

Upvotes: 1

Related Questions