Мне нужна ваша помощь. Я не уверен, как заморозить или иметь верхний ряд моей таблицы, который содержит заголовки, чтобы остаться замороженными, в то время как я смогу прокрутить таблицу? Используя только разметку CSS и НЕТ фреймворков Javascript, как мне это сделать?

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;

    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 

    box-shadow: 0 1px 2px #d1d1d1;
    min-width: 1000px;
}
table th {
    padding:10px 10px 10px 10px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;

    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:10px;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
}
table tr:last-child td {
    border-bottom:0;
}
table tr:last-child td:first-child {
    border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius:3px;
}
table tr:hover td {
    background: #f2f2f2;

}
table th, table td {
    width: 160px;

}
#wrapper {
    width: 740px;
    height: 200px;
    overflow-x: scroll;
    overflow-y: scroll;
}
table thead {
    position: fixed;
}









    
    
        
            Task Details
            Firstname
            Lastname
            Progress
            Vital Task
        
    
    

    
    

        
            Create pretty table design
             
             
            100%
            Yes
        

        
            Take the dog for a walk
             
             
            100%
            Yes
        

        
            Waste half the day on Twitter
             
             
            20%
            No
        

        
            Feel inferior after viewing Dribble
             
             
            80%
            No
        

        
            Wince at "to do" list
             
             
            100%
            Yes
        

        
            Vow to complete personal project
             
             
            23%
            yes
        

        
            Procrastinate
             
             
            80%
            No
        

        
            <a href="#yep-iit-doesnt-exist">Hyperlink Example</a>
             
             
            80%
            <a href="#inexistent-id">Another</a>