html - 奇怪的 html 表格行为

Question

我试图在 html/PHP 页面中实现一个表格，但得到了一些非常令人费解的结果。经过研究我找不到好的答案，所以我想知道是否可以得到一些帮助。

我正在尝试在带有随机白色文本的部分中实现一个表格。在一个较大的分区中有两个宽度为 50% 的分区。我希望它们长度相等。我的目标是从 SQL 数据库中实现一个表来输入数据，但是当我将表插入到同一个分区中时。

这是一张图片:

这是怎么回事？兄弟元素受另一个 div 中的更改影响，我无法找出发生了什么。我知道 HTML 表格可能有问题，但我在其他任何地方都找不到这个问题。

这是我的代码:您可以忽略 PHP，因为我相信这只是一个 HTML 问题。

<?php Include 'includes/header.php';
      $fname = basename($_SERVER['PHP_SELF']);
      $fcontents = fopen("../posts/post3.txt","r");
      $ptitle = fgets($fcontents);
      fgets($fcontents);
      $pauthor = fgets($fcontents);
      $temparr = explode(",",fgets($fcontents));
      $pdate = $temparr[0];
      $ptime = $temparr[1];


      $pmessage = "";

      while (!feof($fcontents)){
        $pmessage = $pmessage . "<p>" . fgets($fcontents) . "</p>";
      }

?>

  <div class = 'container'>
      <?php Include "../includes/login.php";?>
      <article class = 'card same' id = 'postcard'>
        <div class = 'card-header'>
          <a href = '#'><h2 class = 'text-light'> Categories </h2></a>
        </div>
        <div class = 'card-body halfcontent bg-dark'>
          <form class = 'form-group' action = "<?php echo $fname; ?>" method = "post">
            <h4 class = "text-light">Add a category:</h4>
            <input type = 'text' class = 'form-control' placeholder = 'Category name' name = "add">
            <input type = "submit" class = 'btn btn-block text-light dark-theme' value = "Add Category">
          </form>
          <form class = 'form-group' action = "<?php echo $fname; ?>" method = "post">
            <h4 class = "text-light">Update a category:</h4>
            <input type = 'text' class = 'form-control' placeholder = 'Update' name = "Update">
            <input type = "submit" class = 'btn btn-block text-light dark-theme' value = "Update Category">
          </form>
        </div>
        <div class = "halfcontent">
          <table style="width:100%">
            <p class = "text-light"> asdkfjalskfla;skf;laksfjdl;aksfal;ksdfjaklfhdfhkasjhfkalsjhdflkdhlkasjfaksl</p>
          </table>
        </div>
      </article>
    </div>
  <?php include 'includes/footer.php'; ?>

这是我要添加的表格:

      <table style="width:100%">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
      </table>

感谢任何帮助，感谢您的回复。

编辑:这是我的 CSS，因为它可能很重要。

*{
  font-family: 'Rubik','Quicksand', sans-serif;
}
.subtext{
  margin-left: 20px;
  font-style: italic;
}
.Jumbotron{
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #1e1e36;
  border-radius: 0px;
  margin-bottom: 0px;
  clear:both;
}
.Jumbotron h1{
  margin-bottom: 0px;
}
.Jumbotron p{
  padding-top: 0px;
}
.Jumbotron *{
  font-family: 'Quicksand', sans-serif;
  color: #dfdfdf;
}
#footer{
  height: 70px;
  clear: both;
}
.Jumbotron h3{
  float: left;
}
.card-header{
  background-color: #1e1e36;
}
.card-body p{
  color: #dfdfdf;
}
body{
  background-color: #5b6c80;
}
.container{
  border:none;
}
#author{
  font-size: 2.5em;
  margin-bottom: 0px;
}
#date, #time{
  margin-bottom: 0px;
  text-indent: 20px;
}
#content{
  margin-top: 20px;
}
.same{
  display:table-cell;
  min-height: 500px;
}
#postcard{
  background-color: #343a40;
  border-color: #1e1e36;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  height: auto;
}
#login{
  height: auto;
  width: 30%;
  background-color: #343a40;
  border-color: #1e1e36;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

#content-container{
  overflow-y:scroll;
  overflow-x:hidden;
}
#post-container{
  overflow-y:hidden;
}
#report-container,
#content-container,
#post-container{
  display:table-cell;
}

.dark-theme{
  background-color: #1e1e36;
}

#error{
  width: 60%;
  float:left;
  padding: 10px;
}
#moreinput{
  padding: 10px;
  width:40%;
  float:left;
}
#btncontainer{
  width:50%;
  padding: 10px;
  float:left;
}
.posts{
  margin-bottom: 20px;
  border:0px;
}
.post-body{
  border-left: 2px solid grey;
  border-right: 2px solid grey;
}
.halfcontent{
  width:50%;
  float:left;
}
.block{
  display:block;
  margin-top: 10px;
}
#posttable{
  width:100%;
}

Answer 1

我找到了解决方案。我使用的是 css 样式 display:table。这导致了问题。我切换到 display:flex。