使HTML表格的數據響應

我有一個電子商店，下面這段代碼作爲每個產品的描述塊。我們的問題是，這在大屏幕上看起來很棒，比如17英寸的臺式電腦顯示器，但是在較小的智能手機屏幕上它看起來很可怕使HTML表格的數據響應

我的朋友告訴我要學習一些Boostrap/Flexbox和響應網頁設計的基礎知識。我們在我們的網站上有這麼多的產品，它會花費很長時間來更改每個產品的所有代碼。

我想知道是否有某種方式來轉換如下代碼的和平，以便它即使在較小的智能手機屏幕上也會看起來不錯

我們的產品說明塊的代碼很簡單，它由<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>

來源

2016-11-11 BB-8

看看Bootstrap網格元素 - 它使您的屏幕響應https://getbootstrap.com/examples/grid/ –

添加花車左右塊和寬100％的移動。 ü可以看看CSS屬性對象適合使它令人難以置信的易於縮放圖像 – Thorin

我更新（CSS代碼）https://jsfiddle.net/zd6xrv6q/1/

例如，如果屏幕寬度< 960像素

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

來源

2016-11-11 14:46:02

960px是一個很大的範圍，嘗試Bootstrap的移動斷點：768px; – zer00ne

你可以放任何你想要的號碼，例如 –

我知道如何使用媒體查詢，但是，我們通過我們的SAP系統添加了這個代碼，這個系統只是把每件產品的那段代碼插入我們的網站。問題是，就我們所知，我們不能簡單地以聯機風格的方式使用媒體查詢。 –

使HTML表格的數據響應

回答

相關問題