PHP代码中的HTML表格相互重叠

Question

我有两个表，分别是“待办事项”和“已完成的任务”。我不知道为什么当我向 To-do Tasks 表添加新任务时，表会变大并开始与 Completed Tasks 表重叠。我确实为表格设置了最大宽度来阻止它，但它没有帮助。有人可以教我如何解决吗？谢谢

$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

试试这个：

$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>";