如何使第二列响应第一列的两列表响应？
我正在使用在线编辑器创建网站。我有一个简单的表，有两列和一行。在桌面上，它看起来不错，但在移动设备上，我必须左右滚动以查看内容。如何使第二列响应第一列的两列表响应？
我想使它响应小屏幕上的第一列下的第二列。
这里是我的代码：
<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>所以在这个例子中，我想有文字部分小屏幕上的画面去下。我该怎么做？
谢谢大家！
你不应该使用它的表。表格在责任方面非常不方便。
使用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>
您可以使用该应用display: block; width: 100%; height: auto;到table，tr和td媒体查询。这样你就可以使它们成为tds会在彼此之下流动的所有常规块元素。
根据需要设置断点。在我的代码片段中，我将它设置为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？ – Sebastien
这是一个*“snippet” - 如果你点击下面的“Run Code Snippet”，你会看到两者的结果。最上面是样式表（CSS），在它下面是HTML。要将其应用于您自己的代码，请将CSS复制到样式表中，或者如果您没有（不太好）...）转换为HTML文件的“
”部分中的'
<html>
\t <head>
\t \t <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>
，你会想这样的事情？
谢谢John！你做了我的一天，它的工作原理。 但我想定制它更多一点。 我希望文字垂直居中与图片并使其更接近图片，如图片所示：https://res.cloudinary.com/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1200 ，f_auto，q_auto/v1/949589/PrtScr_capture_ypwjve.jpg 我该怎么做？ – Sebastien
@Sebastien检查它：https://jsfiddle.net/33fLLdzr/3/ –
@Sebastien此外，另一个版本发挥：https://jsfiddle.net/33fLLdzr/5/ –