I want to scroll the Django shift table, but ...

The shift table for the current month looks like this. image.png

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!

Recommended Posts

I want to scroll the Django shift table, but ...
I want to pin Spyder to the taskbar
I want to output to the console coolly
I want to handle the rhyme part1
I want to handle the rhyme part3
Django shift table Shows only the facilities to which you belong
I want to display the progress bar
I want to handle the rhyme part2
I want to handle the rhyme part5
I want to handle the rhyme part4
I want to do it with Python lambda Django, but I will stop
I want to use the Django Debug Toolbar in my Ajax application
Added a function to register desired shifts in the Django shift table
I want to pin Datetime.now in Django tests
I want to handle the rhyme part7 (BOW)
I want to customize the appearance of zabbix
I want to use the activation function Mish
Display the Django shift table! Supports 20-day closing
I want to display the progress in Python!
I want to upload a Django app to heroku
Django Python shift table
The file edited with vim was readonly but I want to save it
[Django memo] I want to set the login user information in the form in advance
I want to see the file name from DataLoader
I tried to create a table only with Django
I want to grep the execution result of strace
I want to inherit to the back with python dataclass
I want to fully understand the basics of Bokeh
I want to write in Python! (3) Utilize the mock
I made a command to markdown the table clipboard
I want to handle the rhyme part6 (organize once)
I want to automate ssh using the expect command!
I want to publish the product at the lowest cost
I want to use the R dataset in python
I want to handle the rhyme part8 (finished once)
I want to increase the security of ssh connections
I want to create a lunch database [EP1] Django study for the first time
I want to create a lunch database [EP1-4] Django study for the first time
I want to solve Sudoku (Sudoku)
[TensorFlow] I want to master the indexing for Ragged Tensor
I want to initialize if the value is empty (python)
I want to save the photos sent by LINE to S3
I want to automate ssh using the expect command! part2
maya Python I want to fix the baked animation again.
I want to move selenium for the time being [for mac]
I want to make a blog editor with django admin
I want to use only the normalization process of SudachiPy
I made a command to generate a table comment in Django
I want to get the operation information of yahoo route
I want to change the Japanese flag to the Palau flag with Numpy
I want to calculate the allowable downtime from the operating rate
[Python] I want to use the -h option with argparse
I want to judge the authenticity of the elements of numpy array
[Django] I want to log in automatically after new registration
I can't log in to the admin page with Django3
I want to know the features of Python and pip
I want to make the Dictionary type in the List unique
I want to map the EDINET code and securities number
Keras I want to get the output of any layer !!
I want to align the significant figures in the Numpy array
I want to know the legend of the IT technology world