响应式流体属性表html实现

Posted 2023-03-06

【中文标题】响应式流体属性表html实现

【英文标题】：Responsive fluid property table html implementation

【发布时间】：2021-12-14 20:59:42

【问题描述】：

我有一个属性表，我需要让桌面和移动应用程序看起来不同。

桌面 - 1 个表：

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

手机 - 2 张桌子：

         | Product1
Property | Value  
Property | Value  

         | Product2
Property | Value   
Property | Value   

所有表格都应为width: 100%。我正在寻找为两个视口重用相同 html 布局的解决方案，只需更改不同屏幕宽度的样式。

我尝试了弹性框，但我不确定如何使第一个组合表的单元格高度相同。如果 1 个单元格有 2 行文本，则所有单元格都应拉伸。

最好的方法是什么？谢谢

【参考方案1】：

这样做的一种方法是包含所有可能的表格，并且在屏幕尺寸较大时不显示为移动设备准备的表格，并且在屏幕尺寸较小时不显示为桌面准备的表格。

例子; html

<table class="propertyTable">
    <tr>
      <td></td>
      <td>product 1</td>
      <td>product 2</td>
    </tr>
    <tr>
      <td>property</td>
      <td>value</td>
      <td>value</td>
    </tr>
  </table>

  <table class="propertyTableMobile">
    <tr>
      <td></td>
      <td>product 1</td>
    </tr>
    <tr>
      <td>property</td>
      <td>value</td>
    </tr>
    <tr>
      <td>property</td>
      <td>value</td>
    </tr>
  </table>

  <table  class="propertyTableMobile">
    <tr>
      <td></td>
      <td>product 2</td>
    </tr>
    <tr>
      <td>property</td>
      <td>value</td>
    </tr>
    <tr>
      <td>property</td>
      <td>value</td>
    </tr>
  </table>

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;
  
 

【讨论】：

谢谢，这正是我当前的实现，但我正在寻找为两个视口重用相同 html 布局的解决方案，只需更改不同屏幕宽度的样式。