Я хочу сделать заголовок моей таблицы фиксированным. Таблица присутствует внутри прокручиваемого div. Ниже мой код.

    
        
            
                
                    Order ID
                    Order Date
                    Status
                    Vol Number
                    Bonus Paid
                    Reason for no Bonus
                
            
            
                
                    
                    
                    
                    Data Not Available
                    Data Not Available
                    Data Not Available
                
            
        
    

Ниже мой CSS, который я использую для вышеупомянутого div:

#table-wrapper {
    position:relative;
}

#table-scroll {
    height:250px;
    overflow:auto;  
    margin-top:20px;
}

#table-wrapper table {
    width:100%;
}

#table-wrapper table * {
    background:white;
    color:black;
}

#table-wrapper table thead th .text {
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;
}