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: 5px10px;
}

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

theadth {
  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-itemtd:first-child {
    background-color: #ccc;
    display: block;
    text-align: center;
    width: 100%;
  }

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

<tableclass="responsive-table"><thead><trclass="table-header"><th></th><thclass="right-header">Step 1</th><thclass="right-header">Step 2</th><thclass="right-header">Step 3</th><thclass="right-header">Step 4</th><thclass="right-header">Step 5</th><thclass="right-header">Step 6</th><thclass="right-header">Step 7</th><thclass="right-header">Step 8</th></tr></thead><tbody><trclass="responsive-table-item"><tdclass="left-header">Test</td><thclass="responsive-table-cell">Step 1</th><tdclass="left-header"> $57.36</td><thclass="responsive-table-cell">Step 2</th><tdclass="left-header"> $58.94</td><thclass="responsive-table-cell">Step 3</th><tdclass="left-header"> $60.56</td><thclass="responsive-table-cell">Step 4</th><tdclass="left-header"> $62.23</td><thclass="responsive-table-cell">Step 5</th><tdclass="left-header"> $65.70</td><thclass="responsive-table-cell">Step 6</th><tdclass="left-header"> $69.37</td><thclass="responsive-table-cell">Step 7</th><tdclass="left-header"> $73.23</td><thclass="responsive-table-cell">Step 8</th><tdclass="left-header"> $77.31</td></tr><trclass="responsive-table-item"><tdclass="left-header">Test</td><thclass="responsive-table-cell">Step 1</th><tdclass="left-header"> $4,588.80</td><thclass="responsive-table-cell">Step 2</th><tdclass="left-header"> $4,715.20</td><thclass="responsive-table-cell">Step 3</th><tdclass="left-header"> $4,844.80</td><thclass="responsive-table-cell">Step 4</th><tdclass="left-header"> $4,978.40</td><thclass="responsive-table-cell">Step 5</th><tdclass="left-header"> $5,256.00</td><thclass="responsive-table-cell">Step 6</th><tdclass="left-header"> $5,549.60</td><thclass="responsive-table-cell">Step 7</th><tdclass="left-header"> $5,858.40</td><thclass="responsive-table-cell">Step 8</th><tdclass="left-header"> $6,184.80</td></tr><trclass="responsive-table-item"><tdclass="left-header">Test</td><thclass="responsive-table-cell">Step 1</th><tdclass="left-header"> $119,767.68</td><thclass="responsive-table-cell">Step 2</th><tdclass="left-header"> $123,066.72</td><thclass="responsive-table-cell">Step 3</th><tdclass="left-header"> $126,449.28</td><thclass="responsive-table-cell">Step 4</th><tdclass="left-header"> $129,936.24</td><thclass="responsive-table-cell">Step 5</th><tdclass="left-header"> $137,181.60</td><thclass="responsive-table-cell">Step 6</th><tdclass="left-header"> $144,844.56</td><thclass="responsive-table-cell">Step 7</th><tdclass="left-header"> $152,904.24</td><thclass="responsive-table-cell">Step 8</th><tdclass="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:10px8px;
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)
}