Fix template and css for calender

This commit is contained in:
Theo Reichert 2023-11-17 00:31:02 +01:00
parent 70eabe6800
commit 16ac414d6a
2 changed files with 14 additions and 24 deletions

View file

@ -4,11 +4,23 @@
max-width: 24rem; max-width: 24rem;
} }
.calendar { .calendar table {
border-collapse: separate; border-collapse: separate;
background-color: lightgrey;
align: center;
} }
.calendar th, .calendar th,
.calendar td { .calendar td {
font-weight: bold; font-weight: bold;
vertical-align: top;
}
.calendar td:hover {
background-color: azure;
scale: 1.04;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: scale;
transition-timing-function: ease;
} }

View file

@ -7,32 +7,11 @@
</head> </head>
<body> <body>
<div layout:fragment="content"> <div layout:fragment="content">
<table class="calendar bg-secondary-subtle"> <table class="calendar bg-secondary-subtle" bgcolor="lightgrey" align="center" cellspacing="21" cellpadding="21">
<!-- The tr tag is used to enter
rows in the table -->
<!-- It is used to give the heading to the
table. We can give the heading to the
top and bottom of the table -->
<caption align="top"> <caption align="top">
<!-- Here we have used the attribute
that is style and we have colored
the sentence to make it better
depending on the web page-->
</caption> </caption>
<!-- Here th stands for the heading of the
table that comes in the first row-->
<!-- The text in this table header tag will
appear as bold and is center aligned-->
<thead> <thead>
<tr> <tr>
<!-- Here we have applied inline style
to make it more attractive-->
<th th:each="dayName : ${dayNames}" class="bg-primary" <th th:each="dayName : ${dayNames}" class="bg-primary"
> >
<div <div
@ -69,4 +48,3 @@
</div> </div>
</body> </body>
</html> </html>
<!--th:href="@{/orders/{id}(id=${day.id})}"-->