桌子未垂直对齐

Question

因此，我想做一些非常简单的事情，但我无法正确解决。 我目前正在建立一个论坛，在通常有错误的地方（后端），现在都可以正常工作，可能是通过我使用的黑魔法; D，

因此，现在的事情是：我想显示所有子类别，因此我使用的是下表：

<div id="content_big">
    <div class="content_top_oranje">
        <p class="koptekst">
            <?php echo 'Name';?>
        </p>
        <p style="float:left; margin-left:70%; margin-top:-30px; color:#fff; font-size:11px;font-family:Ubuntu;">
            <?php echo 'Description';?>
        </p>
    </div>
    <div class="content_mid">
        <?php $kop='algemeen' ;
              $query=$ db->conn->prepare("SELECT * FROM ht_forum_categorien WHERE kop = ?");
              $query->bind_param('s', $kop);
              $query->execute();
              $result = $query->get_result();
              while ($row = $result->fetch_assoc()) { ?>
        <table style="width:100%;" border="1" cellspacing="0">
            <tr>
                <td>
                    <?php echo $row[ 'name']; ?>
                </td>
                <td style="margin-left:50px;">
                    <?php echo $row[ 'description]; ?>
                </td>
            </tr>
        </table>
        <?php
              }
        ?>
    </div>
</div> 

但是当我使用它时，这是我得到的输出：

所有行怎么可能不会垂直对齐？ 以及如何解决呢？

谢谢。 （很抱歉，屏幕截图是荷兰语，但是我不能更改数据库中的值，因为它不是我的

Answer 1

您的代码中有两个相当大的问题：

1. 最重要的是，您遇到的问题是：您没有生成表。 您正在生成很多表。 如果需要一个表，请将<table>和</table>标记移出循环，并仅将<tr>及其内容放入while循环中。
2. 一个您没有意识到的问题：您使用的HTML不忠实于您的标记是语义的承诺：标题应该是一个标题元素（h1，h2，h3，您拥有什么），以及一个表，实际上这根本不应该是divs和p和table ，它应该是一个单独的表，具有标题行和标题行，然后是数据行。

因此，让我们将其重写为从PHP和HTML角度都有意义的内容：

<?php
  ...query your data. Do this first...
  $result = ...;
  if($result isn't empty) {
?>
<table>
  <?php
    echo "<thead><th>$kop</th><th>$description</th></thead>";
  ?>
  <tbody>
  <?php
    while ($row = $result->fetch_assoc()) {
      $name = $row['name'];
      $desc = $row['description'];
      echo "<tr><td>$name</td><td>$desc</td></tr>\n";
    }
  ?>
  </tbody>
</table>
<?php } ?>

因此，不要在表中进行查询，而是先进行查询，然后在显示结果的情况下，决定是否编写单个表，并在tbody中将动态内容生成为表行。 并使用CSS根据需要设置thead单元的样式。

为此，请不要使用所有内联style="..."位。 它们都是相同的，因此您只需要重复静态CSS。 使用class="rowclass"或您认为合适的任何名称，然后在样式表或<style>块中定义

.rowclass {
  background-color: ...;
  color: ...;
  ...
}

Answer 2

尝试这个

 <div id="content_big">
    <div class="content_top_oranje">
        <p class="koptekst">
            <?php echo 'Name';?>
        </p>
        <p style="float:left; margin-left:70%; margin-top:-30px; color:#fff; font-size:11px;font-family:Ubuntu;">
            <?php echo 'Description';?>
        </p>
    </div>
    <div class="content_mid">
        <?php $kop='algemeen' ;
              $query=$ db->conn->prepare("SELECT * FROM ht_forum_categorien WHERE kop = ?");
              $query->bind_param('s', $kop);
              $query->execute();
              $result = $query->get_result();
               ?>
        <table style="width:100%;" border="1" cellspacing="0">
        <?php while ($row = $result->fetch_assoc()) { ?>
            <tr>
                <td>
                    <?php echo $row[ 'name']; ?>
                </td>
                <td style="margin-left:50px;">
                    <?php echo $row[ 'description']; ?>
                </td>
            </tr>
               <?php
              }
        ?>
        </table>

    </div>
</div>