HTML Table in PHP code overlap each other - php

Question

I have two tables that are "To-do Tasks" and "Completed Tasks". I don't know why when I add new tasks to the To-do Tasks table, the table grow bigger and start overlapping the Completed Tasks table. I did set the max-width for the table to stop it but it didn't help. Can someone teach me how to fix it? Thank you
$displayQuery="SELECT * FROM incomplete where owner=:owner";
$displayTask= $conn->prepare($displayQuery);
$displayTask->bindValue(':owner', $owner);
$displayTask->execute();
$allTask=$displayTask->fetchAll();
echo "<table class=\"incomplete_table\"><caption>To-do Tasks</caption><tr><th>ID</th><th>Title</th><th>Description</th><th>Due Date</th><th>Time</th><th colspan='3'>Button</th></tr>";
if(count($allTask) > 0)
{
foreach ($allTask as $row) {
echo "<tr><td>".$row["id"]."</td><td>".$row["title"]."</td><td>".$row["description"]."</td><td>".$row["due_date"]."</td><td>".$row["time"]."</td><td><button><a
href='delete.php?table=todotask&did=".$row["id"]."'>Delete</a></button></td>"."<td><button><a
href='checkcomplete.php?table=todotask&did=".$row["id"]."'>Complete</a></button></td>"."<td><button><a
href='modify.php?table=todotask&did=".$row["id"]."'>Modify</a></button></td>"."</td></tr>";
}
}
$displayQueryComplete="SELECT * FROM complete where owner=:owner";
$displayTaskComplete= $conn->prepare($displayQueryComplete);
$displayTaskComplete->bindValue(':owner', $owner);
$displayTaskComplete->execute();
$allTaskComplete= $displayTaskComplete->fetchAll();
echo "<table class=\"complete_table\"><caption>Completed Tasks</caption><tr><th>ID</th><th>Title</th><th>Description</th><th>Due Date</th><th>Time</th><th colspan='3'>Button</th></tr>";
if(count($allTaskComplete) > 0)
{
foreach ($allTaskComplete as $row) {
echo "<tr><td>".$row["id"]."</td><td>".$row["title"]."</td><td>".$row["description"]."</td><td>".$row["due_date"]."</td><td>".$row["time"]."</td><td><button><a
href='delete.php?table=completedtask&did=".$row["id"]."'>Delete</a></button></td>"."<td><button><a
href='checkcomplete.php?table=completedtask&did=".$row["id"]."'>Complete</a></button></td>"."<td><button><a
href='modify.php?table=completedtask&did=".$row["id"]."'>Modify</a></button></td>"."</td></tr>";
}
}
CSS:
.complete_table{
border: 4px solid #5e001f;
border-collapse: collapse;
position: absolute;
top: 34%;
right: 1%;
width: 600px;
max-width: 600px;
}
.complete_table caption, .incomplete_table caption{
font-size: 17px;
color: #5e001f;
font-weight: bold;
border: 1px solid #5e001f;
border-radius: 7px;
padding: 7px;
background-color: white;
margin: 7px;
}
.complete_table th{
border: 1px solid #5e001f;
color: #5e001f;
padding: 7px;
}
.complete_table td{
border: 1px solid #5e001f;
padding: 7px;
color: #5e001f;
}
.incomplete_table{
border: 4px solid #5e001f;
border-collapse: collapse;
position: absolute;
top: 34%;
left: 1%;
width: 600px;
max-width: 600px;
}
.incomplete_table th{
border: 1px solid #5e001f;
color: #5e001f;
padding: 7px;
}
.incomplete_table td{
border: 1px solid #5e001f;
padding: 7px;
color: #5e001f;
}
.incomplete_table a, .complete_table a{
text-decoration: none;
color: #5e001f;
}
.incomplete_table button, .complete_table button{
width: 76px;
background-color: white;
font-size: 14px;
font-weight: bold;
border: 1px solid #5e001f;
border-radius: 7px;
}

Answer 1

try this:
$displayQuery="SELECT * FROM incomplete where owner=:owner";
$displayTask= $conn->prepare($displayQuery);
$displayTask->bindValue(':owner', $owner);
$displayTask->execute();
$allTask=$displayTask->fetchAll();
echo "<table class=\"incomplete_table\"><caption>To-do Tasks</caption><tr><th>ID</th><th>Title</th><th>Description</th><th>Due Date</th><th>Time</th><th colspan='3'>Button</th></tr>";
if(count($allTask) > 0)
{
foreach ($allTask as $row) {
echo "<tr><td>".$row["id"]."</td><td>".$row["title"]."</td><td>".$row["description"]."</td><td>".$row["due_date"]."</td><td>".$row["time"]."</td><td><button><a
href='delete.php?table=todotask&did=".$row["id"]."'>Delete</a></button></td>"."<td><button><a
href='checkcomplete.php?table=todotask&did=".$row["id"]."'>Complete</a></button></td>"."<td><button><a
href='modify.php?table=todotask&did=".$row["id"]."'>Modify</a></button></td>"."</td></tr>";
}
}
echo "</table>";
$displayQueryComplete="SELECT * FROM complete where owner=:owner";
$displayTaskComplete= $conn->prepare($displayQueryComplete);
$displayTaskComplete->bindValue(':owner', $owner);
$displayTaskComplete->execute();
$allTaskComplete= $displayTaskComplete->fetchAll();
echo "<table class=\"complete_table\"><caption>Completed Tasks</caption><tr><th>ID</th><th>Title</th><th>Description</th><th>Due Date</th><th>Time</th><th colspan='3'>Button</th></tr>";
if(count($allTaskComplete) > 0)
{
foreach ($allTaskComplete as $row) {
echo "<tr><td>".$row["id"]."</td><td>".$row["title"]."</td><td>".$row["description"]."</td><td>".$row["due_date"]."</td><td>".$row["time"]."</td><td><button><a
href='delete.php?table=completedtask&did=".$row["id"]."'>Delete</a></button></td>"."<td><button><a
href='checkcomplete.php?table=completedtask&did=".$row["id"]."'>Complete</a></button></td>"."<td><button><a
href='modify.php?table=completedtask&did=".$row["id"]."'>Modify</a></button></td>"."</td></tr>";
}
}
echo "</table>";