Unable to reproduce CSS effect in Django template

Question

I am trying to reproduce the hovering effect that this W3Schools example show here. This example links its CSS to this url instead of embedding it in the code.

I extract the HTML code and all CSS codes for the elements in the page as below. But the same effect does not render on my page. Is there something else in that stylesheet link that controls the rendering? I am a noob in 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>

Update: the HTML code above is coded in a Django template as below and the CSS code is embedded in the table.css file. All directory paths have been verified as working. Is there something in the template that prevents the hovering render?

{% 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 %}

Update: I tried placing the above code into the base.html, which is the base template and it works nicely. What is the difference between the base template and a child template that causes this to not render?

Answer 1

One possible issue is that your table is missing the tbody tag, which is used in the selector for the hover style: .w3-hoverable tbody tr:hover. Browsers seem to add this in for you if missing, but it's good practice to include it anyway and is a possible source of the error.

Just update your HTML (Django template) to include a tbody tag after the thead and around all the tr elements, like this:

<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>