Header Not Being Responsive When Resizing

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 there way to fix t

Solution 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 #ddd;
}



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;
  }
}

<table class="responsive-table">
  <thead>
    <tr class="table-header">
      <th></th>
      <th class="right-header">Step 1</th>
      <th class="right-header">Step 2</th>
      <th class="right-header">Step 3</th>
      <th class="right-header">Step 4</th>
      <th class="right-header">Step 5</th>
      <th class="right-header">Step 6</th>
      <th class="right-header">Step 7</th>
      <th class="right-header">Step 8</th>
    </tr>
  </thead>
  <tbody>
    
    <tr class="responsive-table-item">
      <td class="left-header">Test</td>
      <th class="responsive-table-cell">Step 1</th>
      <td class="left-header"> $57.36</td>
      <th class="responsive-table-cell">Step 2</th>
      <td class="left-header"> $58.94</td>
      <th class="responsive-table-cell">Step 3</th>
      <td class="left-header"> $60.56</td>
      <th class="responsive-table-cell">Step 4</th>
      <td class="left-header"> $62.23</td>
      <th class="responsive-table-cell">Step 5</th>
      <td class="left-header"> $65.70</td>
      <th class="responsive-table-cell">Step 6</th>
      <td class="left-header"> $69.37</td>
      <th class="responsive-table-cell">Step 7</th>
      <td class="left-header"> $73.23</td>
      <th class="responsive-table-cell">Step 8</th>
      <td class="left-header"> $77.31</td>
    </tr>
    <tr class="responsive-table-item">
      <td class="left-header">Test</td>
      <th class="responsive-table-cell">Step 1</th>
      <td class="left-header"> $4,588.80</td>
      <th class="responsive-table-cell">Step 2</th>
      <td class="left-header"> $4,715.20</td>
      <th class="responsive-table-cell">Step 3</th>
      <td class="left-header"> $4,844.80</td>
      <th class="responsive-table-cell">Step 4</th>
      <td class="left-header"> $4,978.40</td>
      <th class="responsive-table-cell">Step 5</th>
      <td class="left-header"> $5,256.00</td>
      <th class="responsive-table-cell">Step 6</th>
      <td class="left-header"> $5,549.60</td>
      <th class="responsive-table-cell">Step 7</th>
      <td class="left-header"> $5,858.40</td>
      <th class="responsive-table-cell">Step 8</th>
      <td class="left-header"> $6,184.80</td>
    </tr>
    <tr class="responsive-table-item">
      <td class="left-header">Test</td>
      <th class="responsive-table-cell">Step 1</th>
      <td class="left-header"> $119,767.68</td>
      <th class="responsive-table-cell">Step 2</th>
      <td class="left-header"> $123,066.72</td>
      <th class="responsive-table-cell">Step 3</th>
      <td class="left-header"> $126,449.28</td>
      <th class="responsive-table-cell">Step 4</th>
      <td class="left-header"> $129,936.24</td>
      <th class="responsive-table-cell">Step 5</th>
      <td class="left-header"> $137,181.60</td>
      <th class="responsive-table-cell">Step 6</th>
      <td class="left-header"> $144,844.56</td>
      <th class="responsive-table-cell">Step 7</th>
      <td class="left-header"> $152,904.24</td>
      <th class="responsive-table-cell">Step 8</th>
      <td class="left-header"> $161,423.28</td>
    </tr>
  </tbody>
</table>

Solution 2:

try width: 13% in left-header class

left-header{
width: 13%;
font-weight:normal;
color:#039;
border-right:2px solid #6678b1;
padding:10px 8px;
text-align:left;
} 

Solution 3:

When the table starts looking bad try media queries for e.g. :

@media all and (max-width: XXXpx){
here you need to put new css styles for example ( smaller font or sthg)
}