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样式显示：table。这导致了问题。我切换到显示：flex。

奇怪的html表行为

1 个答案: