.mclass1 {
position:relative;
width:100%;
height:50vh;
border:1px solid green;
}
caption{
caption-side:bottom;
}
.mclass2{
position:absolute;
top:60px;
left:0px;
border-style:dashed solid;
border-width:1px;
border-color:red;
height:10vh;
z-index:2;
backround-color:rgba(125,125,125,1);
}
.viewtable {
background-color:pink;
display:block;
position:absolute;
z-index:2;
}
.mtable {
border-collapse:collapse;
}
.mtable td , .mtable th {
      border: 1px solid black;
      text-align:center;
}

.mtable th {
background-color:black;
color:white;
border:1px dashed red;
width:30vw;
}
.mtable tr:nth-child(even){
background-color:#dfdfdf;
}
#result {
text-align:right;
}
a {
text-decoration:none;
color:white;
}
a:hover{
font-weight:bold;
font-size:2em;
}
li{
border:1px solid red;
display:block;
width:80px;
color:white;
background-color:purple;
}
li:hover {
background-color:green;
}