Table of Contents
Responsive Layout
<!DOCTYPE html>
<html>
<head>
<style>li a {
display: block;
color: red;
padding: 8px 16px;
text-decoration: none;
background-color: #a8ceed;
border: 1px solid #d9dcde;
}li a.active {
background-color: #4b8abd;
color: white;
}li a:hover:not(.active) {
background-color: #a4a6a4;
color: white;
}
th{
width: 80px;
height: 80px;}
th,td{
border: 1px solid #98a0a6;
}
tr:nth-child(even) {background-color: #e8eaeb;}
tr:nth-child(odd) {background-color: #9dbccc;}
tr:hover {background-color:#181a30;
color: white;
font-size: 15px}#school{
font-size: 45px;
text-align: center;
color:#181a30;
}
</style>
</head>
<body style=”margin: 30;”><ul style=”list-style-type: none;margin: 0;padding: 0;width: 20%;background-color: #e1e6e1;position: fixed;height: 100%; overflow: auto;”>
<li><a class=”active” href=”#home”>Home</a></li>
<li><a href=”#news”>BCC</a></li>
<li><a href=”#news”>ECC</a></li>
<li><a href=”#news”>CCC</a></li>
<li><a href=”#news”>CCC Plus</a></li>
<li><a href=”#news”>DFA</a></li>
<li><a href=”#news”>A Level</a></li>
<li><a href=”#news”>O Level</a></li>
<li><a href=”#contact”>A Level</a></li>
<li><a href=”#about”>B Level</a></li>
<li><a href=”#about”>C Level</a></li>
</ul><div style=”margin-left:20%;padding:1px 16px;height:1000px;”>
<div style=”overflow-x:auto;” id=”school”> S.S Public School Delhi</div>
<div style=”overflow-x:auto;”>
<table style=”border-collapse: collapse; border: 1px solid black;”>
<tr id=”tableheadingheight”>
<th>First Name</th>
<th>Last Name</th>
<th>DOB</th>
<th>Mother Name</th>
<th>Father Name</th>
<th>Address</th>
<th>Mobile Number</th>
<th>Exam Fee</th>
<th>Maths</th>
<th>English</th>
<th>Hindi</th>
<th>Social Science</th>
<th>Computer Science</th>
<th>Science</th>
<th>Other Marks</th>
<th>Results</th>
</tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td></tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td>
</tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td></tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td></tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td></tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td></tr>
<tr>
<td>Ravi</td>
<td>Sharma</td>
<td>22 jul 2000</td>
<td>Geeta Devi</td>
<td>Ramesh Sharma</td>
<td>25 Block D Delhi </td>
<td>9919508550</td>
<td>500</td>
<td>86</td>
<td>74</td>
<td>60</td>
<td>57</td>
<td>50</td>
<td>59</td>
<td>90</td>
<td>Pass</td></tr>
</table>
</div></div>
</body>
</html>