how to use table rows according to screen resolution ?(responsive:desktop,tab,mobile)

Question

Using table css for designing the table.I have used in every tr two tds for desktop view(1200px). If i go to mobile view (768px) it should merge to one row.same goes to mobile view.

---

Html: for every tr there are two td's for desktop view it is set.But for Tab view one by one row needed to be displayed

    <table>
        <tr>
          <td>Model Year: <span class="value">{{vinResults[0].modelYear}}</span></td>
          <td>Fuel : <span class="value">{{vinResults[0].fuel}}</span></td>
        </tr>
        <tr>
          <td>Make : <span class="value">{{vinResults[0].make}}</span></td>
          <td>Brake System : <span class="value">{{vinResults[0].brakeSystem}}</span></td>
        </tr>
        <tr>
          <td>Vehicle Line : <span class="value">{{vinResults[0].vehicleLine}}</span></td>
          <td>GVWR Class : <span class="value">{{vinResults[0].GVWRClass}}</span></td>
        </tr>
    </table>   

scss:

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 1154px;
      height: 49px;
      margin-left: 22px;
      margin-top:40px;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 15px;
    }

    tr:nth-child(odd) {
      background: #F1F4F6 0% 0% no-repeat padding-box;  
        opacity: 1;
    } //for every odd row color is added (not working for tab view).  

I needed to display the table rows one by one in tab view and desktop view I need to display in two rows.

Answer 1

Use Media Query like

*{
  box-sizing:border-box;
}
table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      margin-top:40px;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 15px;
    }

    tr:nth-child(odd) {
      background: #F1F4F6 0% 0% no-repeat padding-box;  
        opacity: 1;
    } 
   tr td .txt-label{
     min-width:125px;
     display:inline-block;
    }
@media(max-width:767.9px){
   td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 15px;
      display:block;
      width:100%;
    }
    tr:nth-child(odd) {
      background: transparent;  
     } 
    tr td:nth-child(odd) {
      background: #F1F4F6 0% 0% no-repeat padding-box;  
      opacity: 1;
    } 
}

https://jsfiddle.net/lalji1051/ao3uwctz/4/

Update version:- https://jsfiddle.net/lalji1051/ao3uwctz/15/