控制两个表格的宽度（仅限桌面和移动设备）

Question

以下 html 代码在 WordPress 帖子中生成两个表。一种仅适用于桌面视图，一种仅适用于移动视图。

问题是，无论我做什么，表格都不适合我的 WordPress 帖子的整个宽度。我尝试将“宽度：100%”放置在代码中的几个不同位置，在某些情况下，它工作正常，表格填充了整个宽度，但突然两个表格都可见，不再区分移动视图和桌面视图。

这是我的代码：

<style media="all">
.mobile-only{display:none}
.desktop-only{display:table}
@media (max-width:500px)
.desktop-only{display:none}
.mobile-only{display:block}
</style> 

<div class="mobile-only">
<table>
<thead>
<tr>
<td><b>Emittent</b></td>
<td><b>Fälligkeit</b></td>
<td><b>Typ</b></td>
<td><b>Richtung</b></td>
<td><b>Hebel</b></td>
<td><b>wkn</b></td>
<td><b>Strategie</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile Bank</td>
<td>Open End</td>
<td>Knock Out</td>
<td>Long</td>
<td>5,7</td>
<td><a href="https://www.onvista.de/derivate/Knock-Outs/265189228-DJ8316-DE000DJ83164">DJ8316</a></td>
<td>Offensiv</td>
</tr>
<tr>
<td>Morgan Stanley</td>
<td>Open End</td>
<td>Knock Out</td>
<td>Long</td>
<td>6,8</td>
<td><a href="https://www.onvista.de/derivate/Knock-Outs/265090595-ME83JW-DE000ME83JW3">ME83JW</a></td>
<td>Offensiv</td>
</tr>
<tr>
<td>Datum: 18.02.2024</td>
</tr>
</tbody>
</table>
</div>

<div class="desktop-only">
<table>
<thead>
<tr>
<td><b>Emittent</b></td>
<td><b>Fälligkeit</b></td>
<td><b>Typ</b></td>
<td><b>Richtung</b></td>
<td><b>Hebel</b></td>
<td><b>wkn</b></td>
<td><b>Strategie</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Desktop Bank</td>
<td>Open End</td>
<td>Knock Out</td>
<td>Long</td>
<td>5,7</td>
<td><a href="https://www.onvista.de/derivate/Knock-Outs/265189228-DJ8316-DE000DJ83164">DJ8316</a></td>
<td>Offensiv</td>
</tr>
<tr>
<td>Morgan Stanley</td>
<td>Open End</td>
<td>Knock Out</td>
<td>Long</td>
<td>6,8</td>
<td><a href="https://www.onvista.de/derivate/Knock-Outs/265090595-ME83JW-DE000ME83JW3">ME83JW</a></td>
<td>Offensiv</td>
</tr>
<tr>
<td>Datum: 18.02.2024</td>
</tr>
</tbody>
</table>
</div>

必须在哪里放置“width: 100%”以使仅移动设备和仅桌面属性仍然有效？

亲切的问候 马克

Answer 1

当您使用多个屏幕的尺寸时，这非常困难。我建议您在 w3school 使用响应式添加引导程序：在此处输入链接描述