css中的響應表（行中的屬性而不是列）

Question

我有一張表格，我正在嘗試爲響應式設計進行正確格式化。在第一列中列出不同的表項並且它們的不同屬性在以下列中的情況下，我已經想出瞭如何做到這一點。

@media screen and (max-width: 480px) { 
    table { 
     width: 100%; 
    } 

    tbody td { 
     display: block; 
     text-align: center; 
    } 

    tbody td:before { 
     content: attr(data-th); 
     display: block; 
     text-align: center; 
    } 
} 

但我沒有弄清楚如何做到這一點，如果我有一個表，其中項目的不同屬性在不同的行。例如，當有兩個產品的比較：

product a product b 
100  200 
5 years 7 years 

，我想這是一個小屏幕這樣的：

product a 
100 
5 years 
product b 
200 
7 years 

我現在擁有的是：

product a 
product b 
100 
200 
5 years 
7 years 

任何提示都非常感謝！

Answer 1

是的，您可以使用CSS tricks來解決此問題。

你只需要設置CSS是這樣的：

@media screen and (max-width: 480px) { 
/* Force table to not be like tables anymore */ 
     table, thead, tbody, th, td, tr { 
      display: block; 
     } 

     /* Hide table headers (but not display: none;, for accessibility) */ 
     thead tr { 
      position: absolute; 
      top: -9999px; 
      left: -9999px; 
     } 

     tr { border: 1px solid #ccc; } 

     td { 
      /* Behave like a "row" */ 
      border: none; 
      border-bottom: 1px solid #eee; 
      position: relative; 
      padding-left: 50%; 
     } 

     td:before { 
      /* Now like a table header */ 
      position: absolute; 
      /* Top/left values mimic padding */ 
      top: 6px; 
      left: 6px; 
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap; 
     } 
/* 
     Label the data 
     */ 
     td:nth-of-type(1):before { content: "product a"; } 
     td:nth-of-type(2):before { content: "product b"; } 
}