Table with Fixed Header and First Column

A simple method of fixing the header and first column of a table using CSS and a few lines of JQuery, feel free to comment, make suggestions or use the code in your own projects

by Manju06

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<main>

<section>
            <h1>Opinion about Social Media</h1>
            <p>Please answer the questions honestly!</p>
             <form action="opinion_request.html" method="get" id="opinions_form">

             <fieldset>
                <legend>Please try to answer every question</legend><br><br>
                <label for="name">Full name:</label>
                <input type="text" id="name" autofocus required><br><br>

                <label for="email">Email:</label>
                <input type="email" id="email" required><br><br>

               <label for="gender">Gender:</label>
                <select id="gender">
                <option value="none">Select a Gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
                 </select><br><br>

                <label>How many hrs per day do you use Social Media?:</label>
                <select id="age">
                <option value="none">Select your choice</option>
                <option value="1-2hrsr">1-2hrs</option>
                <option value="2-4hrs">2-4hrs</option>
                <option value="5hrs+">5hrs+</option>
                </select><br><br>

                <label for="social">List 2 social medias that you use the most:</label>
                 <input type="text" id="social" placeholder="Example: Instagram, Twitter, Facebook"><br><br>

                <label for="rate">Rate Twitter from 1 to 5:</label>
                <input type="range" id="rate"
                    min="1" max="5" step="1"><br><br>                 
                </fieldset> 

                <fieldset> 

                <legend>Survey</legend><br>

                Date you first started social media:&nbsp;&nbsp;
                <input type="date" id="date"><br><br>


                <p>Instagram...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    width: 900px;
    margin: 0 ;
    padding: 0;
    border:0;
    box-shadow: 0 10px 20px 10px;
}
h1, h2, h3, p {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    font-weight: bold;
}
a:hover, a:focus { 
    color: maroon;
}
/* the styles for the header */
header {
    border-bottom: 3px solid #FFD300;
        background-image: -moz-linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
    background-image: -webkit-linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
    background-image: -o-linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
    background-image: linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #00000080 80%, #2641B3 100%);
    padding: 15px 30px; 

} 
header img { 
    float: left; 
} 
header h2 {
    font-size: 250%;
    font-style: italic;
    color: steelblue;
    text-indent: 45px;
    text-shadow: 3px 3px 3px steelblue;
    margin-bottom: .3em;
}
header h3 {
    font-size: 150%;
    text-indent: 45px;
    padding-bottom: .75em;       
}

/* the styles for the navigation menu */
#nav_menu {
    clear: left;

}
#nav_menu ul {
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-evenly;
}
#nav_menu ul li {
    float: left;
}
#nav_menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
#nav_menu ul ul li {
    float: none;
}
#nav_menu ul li:hover > ul {
    display: block;
}
#nav_menu > ul::after {
    content: "";
    clear: both;
    display: block;
}
#nav_menu ul {
    margin: 0;
    padding: 0;
}
#nav_menu ul li a {
    text-align: center;
    display: block;
    width: 180px;
    padding: .7em 0;

    font-weight: bold;
    color: white;
}
#nav_menu ul li a.current {
    color: black;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
    background-color:...