无法在 Django 模板中重现 CSS 效果

Question

我正在尝试重现此 W3Schools 示例显示的 悬停 效果 here。此示例将其 CSS 链接到 this url，而不是将其嵌入代码中。

我为页面中的元素提取 HTML 代码和所有 CSS 代码，如下所示。但是我的页面上没有呈现相同的效果。该样式表链接中是否还有其他东西可以控制渲染？我是 CSS 的菜鸟。

HTML

.w3-table,.w3-table-all  {
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    display:table
}

.w3-table-all  {
    border:1px solid #ccc
}

.w3-bordered tr,.w3-table-all tr {
    border-bottom:1px solid #ddd
}

.w3-table-all tr:nth-child(odd) {
    background-color:#fff
}
.w3-table-all tr:nth-child(even) {
    background-color:#f1f1f1
}

.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th {
    padding:8px 8px;
    display:table-cell;
    text-align:left;
    vertical-align:top
}

.w3-table-all th:first-child,
.w3-table-all td:first-child{
    padding-left:16px
}

.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover {
    background-color:#ccc
}

<div class="w3-container">
  <h2>Hoverable Table</h2>
  <table class="w3-table-all w3-hoverable">
    <thead>
      <tr class="w3-light-grey">
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
    </thead>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
  </table>
</div>

更新：上面的 HTML 代码在下面的 Django 模板中编码，CSS 代码嵌入在 table.css 文件中。所有目录路径都已被验证为有效。模板中是否存在阻止 悬停 渲染的内容？

{% extends "base.html" %}
{% load static %}

{% block title %}Table Detail{% endblock %}

{% block content %}

  <link href="{% static 'css/table.css' %}" rel="stylesheet"/>

  {% block sidebar %}
    {% include 'sidebar_view.html' %}
  {% endblock %}

  {% block page_header_content %}
  <div class="page_header">
    <h1>Order for Table {{table_pk}}</h1>
  </div>
  {% endblock %}

  <div class="menu_row">
    <div class="column left_column" >
<!--      some stuff here-->

    </div>


    <div class="column right_column">
      <h2>Summary</h2>

      <br>

      <div class="w3-container">
        <h2>Hoverable Table</h2>

        <table class="w3-table-all w3-hoverable">
          <thead>
            <tr class="w3-light-grey">
              <th>First Name</th>
              <th>Last Name</th>
              <th>Points</th>
            </tr>
          </thead>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Adam</td>
            <td>Johnson</td>
            <td>67</td>
          </tr>
        </table>
      </div>

  </div>

  <div id="bottom-nav" class="bottom-nav">
<!--    some stuff here-->
  </div>

{% endblock %}

更新：我尝试将上述代码放入base.html，这是基本模板，它运行良好。基本模板和导致此不呈现的子模板有什么区别？

Answer 1

一个可能的问题是您的表格缺少tbody 标记，该标记用于悬停样式的选择器：.w3-hoverable tbody tr:hover。如果缺少，浏览器似乎会为您添加它，但无论如何最好包含它，这可能是错误的来源。

只需更新您的 HTML（Django 模板），在 thead 之后和所有 tr 元素周围包含一个 tbody 标记，如下所示：

<table class="w3-table-all w3-hoverable">
  <thead>
    <tr class="w3-light-grey">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody> <!-- here -->
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
  </tbody> <!-- and here -->
</table>