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-spacing: 0;
|
||||
}
|
||||
table td, table th{
|
||||
@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{
|
||||
}
|
||||
tr:last-child td, tr:last-child th{
|
||||
border-bottom: solid #C0C0C0 1px;
|
||||
}
|
||||
td:last-child, th:last-child{
|
||||
}
|
||||
td:last-child, th:last-child{
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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);
|
||||
}
|
||||
tr:hover td, tr:hover th{
|
||||
}
|
||||
tr:hover td, tr:hover th{
|
||||
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);
|
||||
}
|
||||
}
|
||||
@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