我需要帮助将 table 转换为响应式 div，但不知道最佳方法
I need help converting a table to responsive divs and do not know the best method
我想我需要将 html 中使用 table 制作的布局或外观转换为 Divs，我想。 table 的结构是两列，一侧是图像，另一侧是与图像关联的文本。当压缩得足够小时（比如在移动设备上），我需要将列从两列变为堆叠或一列。我不知道我是否需要使用断点并且从来没有……或者是否有任何其他更好的响应解决方案来复制我在下面包含的结构。这需要在 Wordpress Divi 主题的文本编辑器中进行。
现在我正尝试在这个代码笔中使用 Materialize (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) 来完成这项工作。我不知道 materialize 是否会在 wordpress 中工作...
代码笔
https://codepen.io/robmatthews/pen/qebwor
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
要更改为 non-table 布局，您只需像 table 一样构建 div。我已经应用 类 来说明这一点。
div 和 .my-wrapper 正在取代 table 本身。带有 .my-row 的 div(s) 作为 table 行，带有 .my-cell 的是 "table" 的 columns/cells。
使用 flexbox 我们得到了一个灵活的布局，可以很容易地控制它，并允许你改变你想要的布局。只需申请：
display: flex;
...对于 div，它变成了一个弹性容器并且直接子元素（在这种情况下 div 和 .my-cell ）变成了弹性项目。我在下面的代码中添加了几条注释来指出每一行在做什么。添加边框只是为了使布局更清晰。 运行 全页模式下的代码段和视图，以便您可以调整屏幕宽度并查看响应变化。
重复行布局以构建 table 的其余部分。
有关 flexbox 的更多信息的绝佳资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
* {
box-sizing: border-box;
}
.my-wrapper {
max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
margin: 0 auto; /* centers the container on the page */
border: 1px solid blue;
}
.my-row {
display: flex; /* direction row by default, the cells will be side by side to start */
}
.my-cell {
width: 50%;
padding: 20px;
display: flex; /* yep, the cells can get flexbox layout too */
flex-direction: column; /* each cell will have its content laid out vertically */
align-items: center; /* centers content horizontally */
justify-content: center; /* centers content vertically */
border: 1px solid red;
}
.my-cell img {
max-width: 100%; /* make the images responsive too */
height: auto;
}
@media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
.my-row {
flex-direction: column; /* force the layout to stack the cells vertically */
}
.my-cell {
width: 100%; /* cells should be full width at this point */
}
}
<div class="my-wrapper">
<div class="my-row">
<div class="my-cell">
<img src="https://picsum.photos/200/300" />
</div>
<div class="my-cell">
<h2>Some title text</h2>
<p>Some paragraph text...</p>
<ul>
<li>whatever</li>
<li>you</li>
<li>want</li>
</ul>
</div>
</div>
</div>
抢，
将 class 添加到您的 table 标签（本例中为 class=responsive_table）并编写媒体查询会将列堆叠在另一列下方。
@media screen and (max-width: 400px) {
table.responsive_table {
display: block;
}
table.responsive_table td {
width: 100%;
display: block;
}
}
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff" class="responsive_table">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
您可以更改媒体查询中的断点 max-width
我想我需要将 html 中使用 table 制作的布局或外观转换为 Divs，我想。 table 的结构是两列，一侧是图像，另一侧是与图像关联的文本。当压缩得足够小时（比如在移动设备上），我需要将列从两列变为堆叠或一列。我不知道我是否需要使用断点并且从来没有……或者是否有任何其他更好的响应解决方案来复制我在下面包含的结构。这需要在 Wordpress Divi 主题的文本编辑器中进行。
现在我正尝试在这个代码笔中使用 Materialize (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) 来完成这项工作。我不知道 materialize 是否会在 wordpress 中工作...
代码笔 https://codepen.io/robmatthews/pen/qebwor
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
要更改为 non-table 布局，您只需像 table 一样构建 div。我已经应用 类 来说明这一点。
div 和 .my-wrapper 正在取代 table 本身。带有 .my-row 的 div(s) 作为 table 行，带有 .my-cell 的是 "table" 的 columns/cells。
使用 flexbox 我们得到了一个灵活的布局，可以很容易地控制它，并允许你改变你想要的布局。只需申请：
display: flex;
...对于 div，它变成了一个弹性容器并且直接子元素（在这种情况下 div 和 .my-cell ）变成了弹性项目。我在下面的代码中添加了几条注释来指出每一行在做什么。添加边框只是为了使布局更清晰。 运行 全页模式下的代码段和视图，以便您可以调整屏幕宽度并查看响应变化。
重复行布局以构建 table 的其余部分。
有关 flexbox 的更多信息的绝佳资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
* {
box-sizing: border-box;
}
.my-wrapper {
max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
margin: 0 auto; /* centers the container on the page */
border: 1px solid blue;
}
.my-row {
display: flex; /* direction row by default, the cells will be side by side to start */
}
.my-cell {
width: 50%;
padding: 20px;
display: flex; /* yep, the cells can get flexbox layout too */
flex-direction: column; /* each cell will have its content laid out vertically */
align-items: center; /* centers content horizontally */
justify-content: center; /* centers content vertically */
border: 1px solid red;
}
.my-cell img {
max-width: 100%; /* make the images responsive too */
height: auto;
}
@media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
.my-row {
flex-direction: column; /* force the layout to stack the cells vertically */
}
.my-cell {
width: 100%; /* cells should be full width at this point */
}
}
<div class="my-wrapper">
<div class="my-row">
<div class="my-cell">
<img src="https://picsum.photos/200/300" />
</div>
<div class="my-cell">
<h2>Some title text</h2>
<p>Some paragraph text...</p>
<ul>
<li>whatever</li>
<li>you</li>
<li>want</li>
</ul>
</div>
</div>
</div>
抢，
将 class 添加到您的 table 标签（本例中为 class=responsive_table）并编写媒体查询会将列堆叠在另一列下方。
@media screen and (max-width: 400px) {
table.responsive_table {
display: block;
}
table.responsive_table td {
width: 100%;
display: block;
}
}
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff" class="responsive_table">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
您可以更改媒体查询中的断点 max-width