html - 在引导表中为空行添加消息

Question

我正在开发一个 Django 项目，但对 bootstrap 和 css 来说相对较新。我有一张带有书籍库存的桌子，它看起来很好，直到里面有记录。但是当没有记录时，我想显示一个占位符“还没有添加书籍”。我尝试了多种方法，但我无法这样做。这是我的 html 文件：

<table class="table table-hover table-bordered">
  <thead class="thead-light">
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Author</th>
      <th scope="col">Genre</th>
      <th scope="col">Available</th>
      <th scope="col">Add Date</th>
    </tr>
  </thead>
  <tbody>
    {% if books.count > 0 %}
    {% for row in books %}
    <tr>
      <td>{{row.title}}</td>
      <td>{{row.author}}</td>
      <td>{{row.genre}}</td>
      <td>{% if row.available %}Yes{% else %}No{% endif %}</td>
      <td>{{row.date}}</td>
    </tr>
    {% endfor %}
    {% else %}
    <tr>
      <td>No Books added yet !</td>
    </tr>
    {% endif %}
  </tbody>
</table>

这样做，占位符只是在第一个单元格上进行：

如何编辑此单元格以使该单元格显示为完整的行？

标签： htmlbootstrap-4bootstrap-table