Improved responsive

This commit is contained in:
Romain de Laage 2020-02-19 14:44:22 +01:00
parent 2c38d9e4f9
commit b977d7a7ab
1 changed files with 76 additions and 32 deletions

108
style.css
View File

@ -91,37 +91,81 @@ table{
border-collapse: separate;
border-spacing: 0;
}
table td, table th{
border: solid #C0C0C0 1px;
border-bottom: none;
border-right: none;
padding: 10px;
transition: 0.3s;
@media screen and (min-width: 800px){
td, th{
border: solid #C0C0C0 1px;
border-bottom: none;
border-right: none;
padding: 10px;
transition: 0.3s;
}
tr:last-child td, tr:last-child th{
border-bottom: solid #C0C0C0 1px;
}
td:last-child, th:last-child{
border-right: solid #C0C0C0 1px;
}
tr:first-child td:first-child, tr:first-child th:first-child{
border-radius: 15px 0 0 0;
}
tr:first-child td:last-child, tr:first-child th:last-child{
border-radius: 0 15px 0 0;
}
tr:last-child td:last-child, tr:last-child th:last-child{
border-radius: 0 0 15px 0;
}
tr:last-child td:first-child, tr:last-child th:first-child{
border-radius: 0 0 0 15px;
}
tr:nth-child(2n) td, tr:nth-child(2n) th{
background-color: rgba(255, 255, 255, 0.05);
}
tr:hover td, tr:hover th{
background-color: rgba(255, 255, 255, 0.2);
}
tr:hover td:hover, tr:hover th:hover{
background-color: rgba(255, 255, 255, 0.4);
}
}
tr:last-child td, tr:last-child th{
border-bottom: solid #C0C0C0 1px;
}
td:last-child, th:last-child{
border-right: solid #C0C0C0 1px;
}
tr:first-child td:first-child, tr:first-child th:first-child{
border-radius: 15px 0 0 0;
}
tr:first-child td:last-child, tr:first-child th:last-child{
border-radius: 0 15px 0 0;
}
tr:last-child td:last-child, tr:last-child th:last-child{
border-radius: 0 0 15px 0;
}
tr:last-child td:first-child, tr:last-child th:first-child{
border-radius: 0 0 0 15px;
}
tr:nth-child(2n) td, tr:nth-child(2n) th{
background-color: rgba(255, 255, 255, 0.05);
}
tr:hover td, tr:hover th{
background-color: rgba(255, 255, 255, 0.2);
}
tr:hover td:hover, tr:hover th:hover{
background-color: rgba(255, 255, 255, 0.4);
@media screen and (max-width: 800px){
header{
height: initial;
line-height: initial;
}
footer{
height: initial;
line-height: initial;
}
nav{
width: 100%;
height: initial;
}
nav .logo{
display: none;
}
section{
width: 100%;
height: initial;
}
table{
width: 100%;
}
td{
border: dashed #C0C0C0 1px;
}
th{
border: solid #C0C0C0 1px;
}
td, th{
display: block;
border-bottom: none;
text-align: center;
}
tr:last-child td:last-child, tr:last-child th:last-child{
border-bottom: solid #C0C0C0 1px;
border-radius: 0 0 15px 15px;
}
tr:first-child td:first-child, tr:first-child th:first-child{
border-radius: 15px 15px 0 0;
}
}