时间戳

首页 > 解决方案 > 响应式表格移动/桌面

html - 响应式表格移动/桌面

问题描述

我正在构建一个响应表，其中包含以下分布中的三个元素：

[![这是它在桌面上的样子][1]][1]

但是，我需要使其适应分布，使其在移动设备上看起来像这样：

[![这在手机上应该如何][2]][2]

到目前为止，这是我的代码：

 <tr>
            <td>
    <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
 
  <tr>
   <td style="background: #ffffff; padding: 0px 50px 20px 50px;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
     <!-- LIST ITEM -->
      <tr>
       <td style="width: 60px; height: auto; padding: 0px 0px 0px 0px; " valign="middle" width="121">
        <img alt="" border="0" class="verticalAlignTop" height="121" src="https://i0.wp.com/www.un.org/pga/73/wp-content/uploads/sites/53/2018/09/Dummy-image-1.jpg?ssl=1" style="width: 121px; height: 121px;" valign="middle" width="121"></td><td style="vertical-align: top; padding: 0px 0px 0px 20px; text-align: left; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: 400; display: block" valign="top">
        <h3 style="font-size: 18px; line-height: 25px; margin: 0px 0px 0px 0px; mso-line-height-rule: exactly; font-weight: 700; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</h3></td> <td style="vertical-align: bottom; padding: 20px 0px 0px 20px; text-align: left; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: 400; display: inline-block" valign="bottom">
          <p style="font-size: 15px; line-height: 22px; margin: 0px 0px 0px 0px; mso-line-height-rule: exactly;">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </p></td> </tr>
       </table></td></tr></table></td></tr></table>

如果有人有任何想法，将不胜感激！

提前致谢！[1]：https ://i.stack.imgur.com/QC3Q7.png [2]：https ://i.stack.imgur.com/yGqV9.png

标签： htmlcssresponsive-design

解决方案

你需要css网格系统看例子： https ://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

推荐阅读