header not being responsive when resizing

Question

I have a table where when I resize it wont show my header Steps on the web view it does show perfectly - but when I resize I don\'t get to see my Steps header. is t

Answer 1

Here is my answer:

table {
  margin: auto;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 5px 10px;
}

tr {
  border-bottom: 1px solid #ccc;
}

thead th {
  border-bottom: 2px solid #ffffd;
}



tr.responsive-table-item .responsive-table-cell {
  display: none;
}

   
@media (max-width: 768px) {
  
  .table-header {
    display: none;
  }

  tr.responsive-table-item {
    display: block;
  }

  tr.responsive-table-item .responsive-table-cell {
    display: inline-block;
  }

  tr.responsive-table-item td:first-child {
    background-color: #ccc;
    display: block;
    text-align: center;
    width: 100%;
  }

  tr.responsive-table-item td,
  tr.responsive-table-item th {
    display: inline-block;
    width: calc(50% - 22px);
   
    word-break: break-all;
    vertical-align: top;
  }
}

  

    

      

      
Step 1
      
Step 2
      
Step 3
      
Step 4
      
Step 5
      
Step 6
      
Step 7
      
Step 8
    
  
  

    
    

      
Test
      
Step 1
      
 $57.36
      
Step 2
      
 $58.94
      
Step 3
      
 $60.56
      
Step 4
      
 $62.23
      
Step 5
      
 $65.70
      
Step 6
      
 $69.37
      
Step 7
      
 $73.23
      
Step 8
      
 $77.31
    
    

      
Test
      
Step 1
      
 $4,588.80
      
Step 2
      
 $4,715.20
      
Step 3
      
 $4,844.80
      
Step 4
      
 $4,978.40
      
Step 5
      
 $5,256.00
      
Step 6
      
 $5,549.60
      
Step 7
      
 $5,858.40
      
Step 8
      
 $6,184.80
    
    

      
Test
      
Step 1
      
 $119,767.68
      
Step 2
      
 $123,066.72
      
Step 3
      
 $126,449.28
      
Step 4
      
 $129,936.24
      
Step 5
      
 $137,181.60
      
Step 6
      
 $144,844.56
      
Step 7
      
 $152,904.24
      
Step 8
      
 $161,423.28