【问题标题】:Responsive tables mobile / desktop响应式表格移动/桌面
【发布时间】:2021-08-02 23:55:40
【问题描述】:

我正在构建一个响应式表格,其中包含以下分布中的三个元素:

[![这是它在桌面上的样子][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

【问题讨论】:

    标签: html css responsive-design


    【解决方案1】:

    你需要css网格系统 请参阅示例: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

    【讨论】:

      【解决方案2】:

      表格不是这样工作的。你试过grids

      【讨论】:

        猜你喜欢
        • 2020-12-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-08-03
        • 1970-01-01
        • 2020-01-19
        • 2021-04-04
        • 1970-01-01
        相关资源
        最近更新 更多