Scrollbar for Table

Question

I have a system : https://jsfiddle.net/p2fs68gm/2

I want to add scrollbar for the table. But, as soon as thead or tbody is made display: block, their width

Answer 1

wrap your table inside div and it shoud be set overflow:auto;height:80vh

 table thead tr th {
  background-color: white;
  position: sticky;
  z-index: 100;
  top: -1px;
}
.container {
  margin: 50px;
}

.container h1 {
  color: #2f4f6f;
}

.list {
  border: 1px solid #6c7ae0;
  width: 100%;
  margin-top: 20px;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 0 70px #bbb, 0 0 30px #6c7ae0;
}

.list tr {
  border: 1px solid #ffffd;
  padding: 5px;
}

.list tr:hover {
  background-color: #ffffd;
}

.list th,
.list td {
  padding: 10px;
  text-align: center;
}

.list td {
  color: #333;
}

.list tr td {
  font-size: 18px;
}

.list th {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1px;
  background-color: #6c7ae0;
  color: white;
}

.list td a {
  color: #0000cd;
  text-decoration: none;
  font-weight: 600;
}

.list td a:hover {
  color: #191970;
  font-size: 20px;
  font-weight: bold;
}

.list td a img {
  transition: all .2s ease-in-out;
}

.list td a img:hover {
  transform: scale(1.5);
}

.list .ID {
  width: 200px;
}

.ID {
  font-weight: bold;
}

.list .standings {
  width: 200px;
}

.standings_logo img {
  width: 30px;
  height: 30px;
}

  
  
  
  
  
  
  
  




  

    

      

        

          

            
ID
            
Name
            
Image
          
        
        


          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1
            

              
            
          
          

            
ID_1
            
Name_1