[PYTHON] I want to scroll the Django shift table, but ...

The shift table for the current month looks like this.

When I go down, I don't know which day is what. I haven't studied Html and CSS so much, so I look up and edit the fashionable table HTML, but it just doesn't work ...

You may not be able to create a useful web app without remembering Django's rules, Python, HTML, CSS, and javascript.

The hurdles for web applications are much higher than VBA, but since 0⇒1 is the most difficult time, I will do my best thinking that it is the most difficult situation to learn HTML and CSS (⌒∇⌒).

I'm trying to fix the Html, but if it doesn't work, I might revert from the backup ...

schedule/month.html

{% extends 'schedule/base.html' %}
{% load static %}
{% block customcss %}
<link rel="stylesheet" type="text/scc" href ="{% static 'schedule/month.css' %}">
{% endblock customcss %}

{% block header %}

<ul class="page">
  
        {% ifnotequal month 1 %}
            <a href="{% url 'schedule:monthschedule' year month|add:'-1' %}" class="btn-info btn active">last month</a>
        {% else %}
            <a href="{% url 'schedule:monthschedule' year|add:'-1' 12 %}" class="btn-info btn active">last month</a>
        {% endifnotequal %}
       
        {% ifnotequal month 12 %}
            <a href="{% url 'schedule:monthschedule' year month|add:'1' %}" class="btn-info btn active">Next month</a>
        {% else %}
            <a href="{% url 'schedule:monthschedule' year|add:'1' 1 %}" class="btn-info btn active">Next month</a>
        {% endifnotequal %}
    
    <a href="{% url 'schedule:schedulecreate' year month %}" class="btn-info btn active">Shift creation</a>
</ul>
<p>
{% for shisetsu in shisetsu_object %}
    <span style="background-color:{{ shisetsu.color }}">{{ shisetsu.name }}</span>
{% endfor %}
</p>
    {{ kikan }}　　
    {% for shift in shift_object %}
        {% if shift.name != "Closed" and shift.name != "Yes" %}
            {{ shift.name }} : {{ shift.start_time | date:"G"}}～{{ shift.end_time | date:"G"}}　
        {% endif %}
    {% endfor %}
{% endblock header %}

{% block content %}
<div class='text-nowrap table-responsive'>
    <table class='table table-striped table-hover table-fixed'>
        <thead>
            <tr align="center" class="info">    <!--date-->
                <th rowspan="2"></th>
                {% for item in calender_object %}
                    <th class="day_{{ item.date }}">{{ item.date | date:"d" }}</th>
                {% endfor %}
            <tr align="center" class="info">   <!--Day of the week-->
                {% for item in youbi_object %}
                    <th class="day_{{ item.date }}">{{ item }}</th>
                {% endfor %}
            </tr>
        </thead>
    <tbody>
    {% for profile in profile_list %}
        {% for staff in user_list %}
            {% if profile.user_id == staff.id %}
                <tr align="center">
                <th rowspan="1" class="staff_name" staff_id="{{ staff.staff_id }}" width="200" >{{ staff.last_name }}{{ staff.first_name }}</th>  <!--staff_id element used in js-->
                {% for item in object_list %} 
                    {% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--If the username is the same-->
                        <td class="day" id="s{{ staff.id }}d{{ item.date }}"> 
                        {% if item.shift_name_1 != None %}
                            {% if item.shift_name_1|stringformat:"s" == "Yes" or item.shift_name_1|stringformat:"s" == "Closed" %}
                                {{ item.shift_name_1 }}
                            {% else %}
                                {% for shisetsu in shisetsu_object %}
                                    {% if item.shisetsu_name_1|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                        <span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_1 }}</span>
                                    {% endif %}
                                {% endfor %} 
                            {% endif %}    
                        {% endif %}
                {% if item.shift_name_2 != None %}
                    {% if item.shift_name_2|stringformat:"s" == "Yes" or item.shift_name_2|stringformat:"s" == "Closed" %}
                        {{ item.shift_name_2 }}
                    {% else %}
                        {% for shisetsu in shisetsu_object %}
                            {% if item.shisetsu_name_2|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                    <span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_2 }}</span>
                            {% endif %}
                        {% endfor %} 
                    {% endif %}    
                {% endif %}
                {% if item.shift_name_3 != None %}
                    {% if item.shift_name_3|stringformat:"s" == "Yes" or item.shift_name_3|stringformat:"s" == "Closed" %}
                        {{ item.shift_name_3 }}
                    {% else %}
                        {% for shisetsu in shisetsu_object %}
                            {% if item.shisetsu_name_3|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                <span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_3 }}</span>
                            {% endif %}
                        {% endfor %} 
                    {% endif %}    
                {% endif %}
                {% if item.shift_name_4 != None %}
                    {% if item.shift_name_4|stringformat:"s" == "Yes" or item.shift_name_4|stringformat:"s" == "Closed" %}
                        {{ item.shift_name_4 }}
                    {% else %}
                        {% for shisetsu in shisetsu_object %}
                            {% if item.shisetsu_name_4|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                <span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_4 }}</span>
                            {% endif %}
                        {% endfor %} 
                    {% endif %}    
                {% endif %}                   
            {% endif %}            
        {% endfor %}
        </td>

        <tr align="center">
            {% for month in month_total %} 
                {% if month.user ==  staff.id %}<!--If the username is the same-->
                    <td><b>{{ month.month_total_worktime }}</b></td>
                {% endif %}
            {% endfor %}
            {% for item in object_list %} 
                {% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--If the username is the same-->
                    <td class="day" id="s{{ staff.id }}d{{ item.date }}">
                        <a href="{% url 'schedule:update' item.pk %}">{{ item.day_total_worktime }} </a>
                    </td>
            {% endif %}            
        {% endfor %}
        </tr>
        {% endif %}
        {% endfor %}
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock content %}

CSS is

schedule/month.css

table{
  border-collapse:separate;
  border-spacing: 0;
}

table thead:first-child{
  border-radius: 5px 0 0 0;
}

table thead:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

table thead{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  
  padding: 10px 0;
}

Even if you do this, Css will not be applied. In Table, which is described in html

I wrote that, but is this applied with priority? Now I'm studying the basics of Python while studying HTML and CSS. It may slow down the development a little, but it's because of the breakthrough after that!