javascript - 使 HTML 表格的数据响应

Question

我有一个电子商店，下面这段代码作为那里每个产品的描述 block 。我们的问题是，这在 17 英寸台式电脑显示器等大屏幕上看起来很棒，但在较小的智能手机屏幕上看起来很糟糕。

我的 friend 告诉我学习一些 Boostrap/Flexbox 和响应式网页设计的基础知识。问题是我们的网站上有太多产品，需要很长时间才能更改每个产品的所有代码。

我想知道是否有一些方法可以转换下面的代码，使其即使在较小的智能手机屏幕上也看起来不错。

我们的产品描述 block 代码很简单，它由<table>组成的 <tr>和 <td> s，左边有一个<td>其中包含 <img>内嵌样式的产品图片 <div> .在右侧，有一个<td>。带有我们产品描述文本的段落。

小屏幕的最佳解决方案是制作 <td>用 <img>出现在 <td> 上方带有产品描述段落。问题是我们不知道该怎么做。 请帮忙。

这是代码↓(JS FIDDLE:https://jsfiddle.net/zd6xrv6q/)

<table align="center" border="0" width="100%" style="border:1px lightgray solid;box-shadow: 1px 2px 5px gray;margin-top:15px">
<tbody>
<tr>   

<!-- LEFT IMAGE-->
<td width="50%" valign="middle" style="text-align:justify;border-top: white 10px solid;border-bottom: white 10px solid;border-left: white 10px solid">
<div style="text-align: center;margin-bottom:0px">
<img style="WIDTH: 100%" src="http://www.allcarbrandslist.com/wp-content/uploads/2015/03/mustang-symbol.jpg" >
</div>
</td>

<!-- RIGHT TEXT -->
<td width="50%" valign="middle" style="text-align:justify;padding:3%;vertical-align:middle;color: gray;border: white 10px solid; background: linear-gradient(#F7F7F7 90%, #EDEDED 100%)">
<h2 style="color:black">Random Section header</h2>
<p>RANDOM TEST PARAGRAPH: A ruler frowns a built slogan. The toy copyrights a fruit on top of the verbatim commentator. A fond mania disciplines the increased finger. The prejudice founds a warped capitalist. Will the crossing grandmother bite the dismal prophet?</p>
</td>

</tr>
</tbody>
</table>

Answer 1

我更新它(css 代码)https://jsfiddle.net/zd6xrv6q/1/

例如，如果屏幕宽度 < 960px

@media (max-width: 960px) {
  td {
     display: block;
     width: 100%;
  }
}

了解更多 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries