change css, add thead

This commit is contained in:
starnakin 2024-08-06 14:04:44 +02:00
parent a6b0eb17e7
commit 2ca297e68c
2 changed files with 51 additions and 9 deletions

View File

@ -11,6 +11,16 @@
<body> <body>
<h1>My Readings</h1> <h1>My Readings</h1>
<table id="table"> <table id="table">
<thead>
<tr>
<th>Image</th>
<th>Name and description</th>
<th>My opignon</th>
<th>Reading date</th>
</tr>
</thead>
<tbody>
{{books}} {{books}}
</tbody>
</table> </table>
</body> </body>

View File

@ -1,19 +1,47 @@
body{ :root{
background-color: #586e75; --bg1: #002b36;
--bg2: #073642;
--content1: #586e75;
--content2: #657b83;
--content3: #839496;
--content4: #93a1a1;
--lbg1: #eee8d5;
--lbg2: #fdf6e3;
} }
h1, #table { table tbody tr:nth-child(odd){
background-color: var(--content1);
}
table tbody tr:nth-child(even) {
background-color: var(--content4);
}
body{
background-color: var(--bg1);
color: white;
}
h1 {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#table { table {
background-color: green; border-collapse:collapse;
background-color: var(--bg2);
}
thead {
background-color: var(--base1);
}
tbody {
background-color: var(--base0);
} }
tr { tr {
max-height: 250px; max-height: 250px;
background-color: green; background-color: inherit;
} }
img { img {
@ -30,9 +58,13 @@ img {
width: 30%; width: 30%;
} }
.reading-date {
width: 5%;
}
td { td {
background-color: red; text-align: center;
border: 2px solid; background-color: none;
} }
.name { .name {