Как свернуть столбики таблицы в строки на мобильных устройствах?

Question

Я разрабатываю веб-сайт с меню ресторана. Каждый товар доступен в разных размерах, каждый по другой цене. Это отображается на средние и больших устройствах с помощью таблицы, с колонной для каждой цены:

На мобильных устройствах, экран является слишком узким, чтобы правильно отображать до 4-х различных размеров для каждого продукта.

Так что я хотел бы сложить столбцы в строки, имеющие каждую строку, начиная с именем столбца:

Есть ли что-нибудь, как это возможно, используя адаптивный дизайн? Я стараюсь избегать поддержки двух разных HTML-версий контента, видимого только на мобильных устройствах, и одного, видимого только на больших экранах.

Я использую Foundation 5, поэтому я идеально ищу решение с использованием этой сетки, но я открыт для любого решения.

Answer 1

Я нашел решение в этом блоге: 10+ Solutions for Responsive Data Table.

Он включает в себя создание ячеек таблицы display: block на мобильных устройствах и добавление атрибута data-* к каждой ячейке, соответствующей имени столбца.

Этот атрибут данных вводится в псевдоэлемент ячейки ::before с помощью content: attr().

Пример:

<table> 
    <thead> 
     <tr> 
      <th>Pasta</th> 
      <th>Small</th> 
      <th>Regular</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Spaghetti Bolognese</td> 
      <td data-th="Small">£5.00</td> 
      <td data-th="Regular">£7.00</td> 
     </tr> 
     <tr> 
      <td>Lasagna</td> 
      <td data-th="Small">£5.00</td> 
      <td data-th="Regular">£7.00</td> 
     </tr> 
    </tbody> 
</table> 

CSS:

@media only screen and (max-width: 40em) { 
    thead th:not(:first-child) { 
     display: none; 
    } 

    td, th { 
     display: block; 
    } 

    td[data-th]:before { 
     content: attr(data-th); 
    } 
} 

Вам нужно добавить некоторые дополнительные float сделать это красиво.

Рабочий пример: http://codepen.io/anon/pen/medrZo