Improved responsive
This commit is contained in:
parent
2c38d9e4f9
commit
b977d7a7ab
82
style.css
82
style.css
|
@ -91,37 +91,81 @@ table{
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
table td, table th{
|
@media screen and (min-width: 800px){
|
||||||
|
td, th{
|
||||||
border: solid #C0C0C0 1px;
|
border: solid #C0C0C0 1px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
tr:last-child td, tr:last-child th{
|
tr:last-child td, tr:last-child th{
|
||||||
border-bottom: solid #C0C0C0 1px;
|
border-bottom: solid #C0C0C0 1px;
|
||||||
}
|
}
|
||||||
td:last-child, th:last-child{
|
td:last-child, th:last-child{
|
||||||
border-right: solid #C0C0C0 1px;
|
border-right: solid #C0C0C0 1px;
|
||||||
}
|
}
|
||||||
tr:first-child td:first-child, tr:first-child th:first-child{
|
tr:first-child td:first-child, tr:first-child th:first-child{
|
||||||
border-radius: 15px 0 0 0;
|
border-radius: 15px 0 0 0;
|
||||||
}
|
}
|
||||||
tr:first-child td:last-child, tr:first-child th:last-child{
|
tr:first-child td:last-child, tr:first-child th:last-child{
|
||||||
border-radius: 0 15px 0 0;
|
border-radius: 0 15px 0 0;
|
||||||
}
|
}
|
||||||
tr:last-child td:last-child, tr:last-child th:last-child{
|
tr:last-child td:last-child, tr:last-child th:last-child{
|
||||||
border-radius: 0 0 15px 0;
|
border-radius: 0 0 15px 0;
|
||||||
}
|
}
|
||||||
tr:last-child td:first-child, tr:last-child th:first-child{
|
tr:last-child td:first-child, tr:last-child th:first-child{
|
||||||
border-radius: 0 0 0 15px;
|
border-radius: 0 0 0 15px;
|
||||||
}
|
}
|
||||||
tr:nth-child(2n) td, tr:nth-child(2n) th{
|
tr:nth-child(2n) td, tr:nth-child(2n) th{
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
tr:hover td, tr:hover th{
|
tr:hover td, tr:hover th{
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
tr:hover td:hover, tr:hover th:hover{
|
tr:hover td:hover, tr:hover th:hover{
|
||||||
background-color: rgba(255, 255, 255, 0.4);
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue