如何使双列表格响应第二列在第一列之下？答案

【问题标题】：How to make a two columns table responsive with second column going under first one?如何使双列表格响应第二列在第一列之下？
【发布时间】：2018-03-10 06:58:00
【问题描述】：

我正在使用在线编辑器创建网站。我有一个两列一行的简单表格。在桌面上，它看起来很棒，但在移动设备上，我必须左右滚动才能看到内容。

我想让第二列在小屏幕上的第一列下方进行响应。

这是我的代码：

<div style="overflow-x: auto;">
  <table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;">
    <tbody>
      <tr style="height: 143.6px;">
        <td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
        <td style="width: 439px; height: 143.6px;">
          <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
          <br />
          <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

所以在这个例子中，我想让文本部分放在小屏幕上的图片下方。请问我该怎么做？

谢谢大家！

【问题讨论】：

标签： html css responsive-design html-table

【解决方案1】：

您不应该为此使用表格。表格在责任方面是非常不方便的东西。

使用 CSS 网格布局。在我的示例中，尝试调整屏幕大小。当它变窄时，柱子一个接一个地移动。当窗口相对较宽时，您可以并排看到它们。

https://jsfiddle.net/33fLLdzr/1/

<div class="wrapper">
    <div class="box sidebar"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></div>
    <div class="box sidebar2">
        <h3 style="text-align: left;">It all starts with a test</h3>
        <p style="line-height: 1.6; text-align: left;">This is an example. This is an example. Testing and testing again.</p>
    </div>
</div>

<style>
body {
    margin: 40px;
}

.sidebar {
    grid-area: sidebar;
}

.sidebar2 {
    grid-area: sidebar2;
}

.wrapper {
    background-color: #fff;
    color: #444;
}

.wrapper {
    display: grid;
    grid-template-areas:
        "sidebar"
        "sidebar2"
}

@media only screen and (min-width: 600px) {
    .wrapper {
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "sidebar sidebar2"
    }
}
</style>

【讨论】：

谢谢约翰！你让我很开心，而且很有效。但我想对其进行更多定制。我希望文本与图片垂直居中，并使其更接近图片，如下图所示：res.cloudinary.com/hrscywv4p/image/upload/… 我该怎么做？

【解决方案2】：

您可以使用媒体查询，将display: block; width: 100%; height: auto; 应用于table、tr 和td。这样你就可以让它们成为tds 将在彼此下方流动的所有常规块元素。

根据需要设置断点。在我的 sn-p 中，我将其设置为 600px；

并尽量避免使用内联样式。如果您想使用媒体查询，它们确实会妨碍您...

html, body {
margin: 0;
}
table {
  height: 452px;
  width: 821px;
  margin-left: auto;
  margin-right: auto;
}
tr {
height: 143.6px;
}
td.x {
  width: 280px;
  height: 143.6px;
}

td.y {
  width: 439px;
  height: 143.6px;
}

@media screen and (max-width: 600px) {
  table,
  tr,
  td.x,
  td.y {
    display: block;
    width: 100%;
    height: auto;
  }
}

<div style="overflow-x: auto;">
  <table>
    <tbody>
      <tr>
        <td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
        <td class="y">
          <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
          <br />
          <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

感谢 Johannes，但我在理解您所做的事情时遇到了一些麻烦。你给了两段代码。两者都是 HTML 并且应该放在彼此之下？或者一个是CSS？
这是一个 Stackoverflow "sn-p" - 如果你点击它下面的 "Run Code Snippet"，你会同时看到两者的结果。上面是样式表 (CSS)，下面是 HTML。要将其应用于您自己的代码，您可以将 CSS 复制到您的样式表中，或者如果您没有 CSS（不太好......）到您的 html 文件的 <head> 部分中的 <style> 标记中，以及页面代码的body 中的HTML 代码。这是非常基本的东西，顺便说一句......

【解决方案3】：

<html>
	<head>
		<meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
       <img class="aligncenter wp-image-4684" src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /> 
     
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">This is an example. This is an example. Testing and testing again.</a>

  </body>
</html>

你想要这样的东西吗？

【讨论】：