Блог

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

Рабочий стол — 1 стол:

 | Product1 | Product2 Property | Value | Value Property | Value | Value  

Мобильный — 2 стола:

 | Product1 Property | Value  Property | Value   

 | Product2 Property | Value  Property | Value    

Все таблицы должны быть width: 100% . Я ищу решение для повторного использования одного и того же html-макета для обоих видовых экранов, просто измените стили для разной ширины экрана.

Я попробовал flex box, но я не уверен, как сделать так, чтобы высота ячеек была одинаковой для первой комбинированной таблицы. Все ячейки должны растягиваться, если в 1 ячейке 2 строки текста.

Каков наилучший способ? Спасибо

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

пример; html

 lt;table class="propertyTable"gt;  lt;trgt;  lt;tdgt;lt;/tdgt;  lt;tdgt;product 1lt;/tdgt;  lt;tdgt;product 2lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;propertylt;/tdgt;  lt;tdgt;valuelt;/tdgt;  lt;tdgt;valuelt;/tdgt;  lt;/trgt;  lt;/tablegt;   lt;table class="propertyTableMobile"gt;  lt;trgt;  lt;tdgt;lt;/tdgt;  lt;tdgt;product 1lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;propertylt;/tdgt;  lt;tdgt;valuelt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;propertylt;/tdgt;  lt;tdgt;valuelt;/tdgt;  lt;/trgt;  lt;/tablegt;   lt;table class="propertyTableMobile"gt;  lt;trgt;  lt;tdgt;lt;/tdgt;  lt;tdgt;product 2lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;propertylt;/tdgt;  lt;tdgt;valuelt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;propertylt;/tdgt;  lt;tdgt;valuelt;/tdgt;  lt;/trgt;  lt;/tablegt;  

CSS

 .propertyTable{  width: 100%;  }  .propertyTable td,.propertyTableMobile td{  border: 1px solid #ddd;  } .propertyTableMobile{  display: none;  width: 100%;  }   @media only screen and (max-width: 420px) {  .propertyTable{  display: none;  }  .propertyTableMobile{  margin: 10px 0;  display: table;  table-layout: fixed;  }  }