如何根据屏幕分辨率使用 table 行？（响应：桌面，标签，移动）

Question

使用 table css 设计 table.I 每 tr 使用两个 td 桌面视图（1200px）。如果我转到移动视图 (768px)，它应该合并到一个 row.same 转到移动视图。

Html: 对于每个 tr 有两个 td 对于桌面视图它是 set.But 对于 Tab 视图需要一行一行显示

    <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).

我需要在选项卡视图和桌面视图中逐行显示 table 行我需要分两行显示。

Answer 1

像

一样使用媒体查询

*{
  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/

更新版本：- https://jsfiddle.net/lalji1051/ao3uwctz/15/

如何根据屏幕分辨率使用 table 行？（响应：桌面，标签，移动）

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

html

responsive

css-tables