我的桌子空间太大答案

【问题标题】：Too much space in my table我的桌子空间太大
【发布时间】：2017-05-10 15:40:39
【问题描述】：

我的 PHP 代码有一个小问题，用于填充我的一些数据库内容的表。我试图将每个注册与 div 中的表分开。我该怎么做才能摆脱第二个和第三个注册 div 上可见的空间？

表格示例：

<?php
$selected = $DBcon->query("SELECT * FROM lucrari, editors");
while($row = mysqli_fetch_array($selected)){
    echo '<div class="lucrare">';
    echo '<table class="tabel_lucrari">';
    echo '<tr>';
    echo '<th><div class="titlu_lucrare"><a href="lucrare.php?id_lucrare='.$row['id_lucrare'].'"'.'>'.$row['titlu'].'</a></div></th>';
    echo '<th></th>';
    echo '<tr>';
    echo '<tr>';
    echo '<td rowspan="3">'.'<img src="'.$row['avatar'].'">'.'</td>';
    echo '<td><div class="text_lucrare">Autor:&nbsp;</div>'.$row['autor'].'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td><div class="text_lucrare">Disciplina:&nbsp;</div>'.$row['disciplina'].'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td>'.'<div class="text_lucrare">Data postarii:&nbsp;</div>'.$row['data'].'</td>';
    echo '</tr>';
    echo '</table>';
    echo '</div>';
    echo '<br>';
}
?>

【问题讨论】：

你能给我们展示一下渲染的html+css吗？...
请在 sn-p 中显示呈现的 HTML（不是 PHP）和您现有的 CSS。如果你点击“Run code sn-p”，你会看到什么都没有发生。
我真的很抱歉，但我不能这样做。我附上了一张图片以显示我的代码“正在运行”。
title 正在调整您的 td 将 colspan 放在 th 标签上
@CatalinAvasiloaie 来自浏览器的检查

标签： php html class html-table

【解决方案1】：

如果您谈论每个表之间的空间，请执行以下操作：

去掉末尾的echo '<br>';。

如果您仍有空间，请尝试以下操作：添加CSS

.lucrare {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

更新：我看到您的表格标题扩展问题，您可以随时使用此 css 进行调试，然后在完成后将其删除：

table, th, td {
    border: 1px solid black;
}

通过这样做，您可以很容易地发现问题。使用colspan="2"，如果有边框，有时您可能需要删除空的<th></th>。

table, th, td {
    border: 1px solid black;
}

<div class="lucrare">
  <table class="tabel_lucrari">
    <tr>
      <th>
        <div class="titlu_lucrare"><a href="lucrare.php?id_lucrare='.$row['id_lucrare'].'" '.'>'.$row['titlu'].'</a></div>
      </th>
      <th></th>
      <tr>
        <tr>
          <td rowspan="3">'.'<img src="'.$row['avatar'].'">'.'</td>
          <td>
            <div class="text_lucrare">Autor:&nbsp;</div>'.$row['autor'].'</td>
        </tr>
        <tr>
          <td>
            <div class="text_lucrare">Disciplina:&nbsp;</div>'.$row['disciplina'].'</td>
        </tr>
        <tr>
          <td>
            <div class="text_lucrare">Data postarii:&nbsp;</div>'.$row['data'].'</td>
        </tr>
  </table>
</div>
<br>

<div class="lucrare">
  <table class="tabel_lucrari">
    <tr>
      <th>
        <div class="titlu_lucrare"><a href="lucrare.php?id_lucrare='.$row['id_lucrare'].'" '.'>This Title is too long...Sorry!</a></div>
      </th>
      <th></th>
      <tr>
        <tr>
          <td rowspan="3">'.'<img src="'.$row['avatar'].'">'.'</td>
          <td>
            <div class="text_lucrare">Autor:&nbsp;</div>'.$row['autor'].'</td>
        </tr>
        <tr>
          <td>
            <div class="text_lucrare">Disciplina:&nbsp;</div>'.$row['disciplina'].'</td>
        </tr>
        <tr>
          <td>
            <div class="text_lucrare">Data postarii:&nbsp;</div>'.$row['data'].'</td>
        </tr>
  </table>
</div>
<br>
<div class="lucrare">
  <table class="tabel_lucrari">
    <tr>
      <th colspan="2">
        <div class="titlu_lucrare"><a href="lucrare.php?id_lucrare='.$row['id_lucrare'].'" '.'>This title is long too but use colspan can fix</a></div>
      </th>
      <tr>
        <tr>
          <td rowspan="3">'.'<img src="'.$row['avatar'].'">'.'</td>
          <td>
            <div class="text_lucrare">Autor:&nbsp;</div>'.$row['autor'].'</td>
        </tr>
        <tr>
          <td>
            <div class="text_lucrare">Disciplina:&nbsp;</div>'.$row['disciplina'].'</td>
        </tr>
        <tr>
          <td>
            <div class="text_lucrare">Data postarii:&nbsp;</div>'.$row['data'].'</td>
        </tr>
  </table>
</div>
<br>

【讨论】：

【解决方案2】：

空白是因为您的th 标签的宽度大于您的avatar 所在的td。因此它会调整整列的大小。

如果将colspan 添加到th 元素应该没问题。

<th colspan="2"><div class="titlu_lucrare">
  <a href="lucrare.php?id_lucrare='.$row['id_lucrare'].'"'.'>'.$row['titlu'].'</a></div>
</th>

【讨论】：