如何使双列表格响应第二列在第一列之下？
Posted
技术标签:
【中文标题】如何使双列表格响应第二列在第一列之下？【英文标题】：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" /></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>所以在这个例子中，我想让文本部分放在小屏幕上的图片下方。请问我该怎么做？
谢谢大家！
【问题讨论】：
【参考方案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" /></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" /></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？ 这是一个 *** "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" />
<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>
你想要这样的东西吗？
【讨论】：
以上是关于如何使双列表格响应第二列在第一列之下？的主要内容，如果未能解决你的问题，请参考以下文章
excel表格中，第一列是人名，如何在第二列显示人名的拼音字头？
EXCEL如何把第二列的数据按照第一列数据排序，且第二列的数据少于第一列？