使HTML表格's数据响应

Make HTML table's data responsive

本文关键字：数据 响应 HTML 表格      更新时间：2023-09-26

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

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

我想知道是否有一些方法可以改变下面的代码，这样即使在较小的智能手机屏幕上它也会看起来很好。

我们的产品描述块代码很简单，它由<table>的<tr>和<td>组成，左边有一个<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>

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

例如if screen width <960 px 

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

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

相关文章：