I want to create a table inside a div, but it is printing outside the div

问题

Here, the div is a pop up when a text in the html is clicked. 'db' is an object created in another part of the code, which holds various arrays. Here, the table consists of elements from one such array. The elements of the table, when clicked, displays another pop-up (This part is working fine).

The issue is, the table part of the div is just displayed without me clicking any text. Please help

    <div class="modal-content animate" >
        <div class="imgcontainer">
            <span onclick="document.getElementById('Card').style.display='none'" class="close" title="Close">&times;</span>
            <img src="doctor.jpg" alt="Avatar" class="avatar">
        </div>
    <%  int i;
        if(db.cardNotPunched==0){
            out.println(" You have punched your card everyday so far this month ");
        } else {
            out.println("         <table table-layout='fixed' border = '1' align='center' width='600'>\n" +
                    "         <tr>\n" +
                    "            <th> Day </th>\n" +
                    "         </tr>");

            for (i = 0; db.cardNotPunchedDays[i]!=0; i++) {
                out.println("     <tr>\n" +
                        "             <td style = 'text-align:center'  height=40 > <div onclick= document.getElementById('Reason"+ db.cardNotPunchedDays[i]+ "').style.display='block' style= 'width:auto'; -webkit-box-align:'center' ><font style = 'color: black' > " + db.date[db.cardNotPunchedDays[i]] + " </font></div> </td>\n" +
                        "         </tr>\n");
            }
        }
    %></div>
    </div>

来源：https://stackoverflow.com/questions/61190251/i-want-to-create-a-table-inside-a-div-but-it-is-printing-outside-the-div