html - 无法使表格响应
问题描述
我有一个内容非常大的表格，我正在尝试使用 Bootstrap 使其响应：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head></head>
<body>
<table class="table">
<tbody>
<tr>
<td>
<p style="text-align: center">
<strong>TELEPHONE CALL CENTER</strong>
</p>
<p style="text-align: center"> </p>
<p style="text-align: center"><strong>Timetables:</strong></p>
<p style="text-align: center">
Monday and Friday: <strong>9.00 - 12.00</strong>
</p>
<p style="text-align: center">
Tuesday and Thursday: <strong>15.00 – 17.00</strong>
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center">
It is possible to access the call-center services, at the
scheduled times, by calling the following numbers:
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center"><strong>0000-00000</strong></p>
<p style="text-align: center"><strong>000-00000</strong></p>
<p style="text-align: center"><strong>000-00000</strong></p>
<p style="text-align: center"> </p>
</td>
<td>
<p style="text-align: center"><strong>WHATSAPP DOORS</strong></p>
<p style="text-align: center"> </p>
<p style="text-align: center"><strong>Timetables:</strong></p>
<p style="text-align: center">
Monday and Friday: <strong>9.00 - 12.00</strong>
</p>
<p style="text-align: center">
Tuesday and Thursday: <strong>15.00 – 17.00</strong>
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center">
It is possible to access the Whatsapp counters, at the scheduled
times, by sending a message to the following telephone numbers:
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center"><strong>000-000000</strong></p>
<p style="text-align: center"><strong>000-0000000</strong></p>
</td>
<td>
<p style="text-align: center">
<strong>SKYPE AUDIO-VIDEO DOORS</strong>
</p>
<p style="text-align: center"> </p>
<p style="text-align: center"><strong>Orari:</strong></p>
<p style="text-align: center">
Monday and Friday: <strong>9.00 - 12.00</strong>
</p>
<p style="text-align: center">
Tuesday and Thursday: <strong>15.00 – 17.00</strong>
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center">
It is possible to access the Skype counters, at the scheduled
times, by contacting the following addresses:
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center"><strong>ID: foo</strong></p>
<p style="text-align: center"><strong>ID: foo2</strong></p>
<p style="text-align: center"><strong>ID: foo3</strong></p>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
<figure class="image image_resized" style="width: 60.07%">
<img src="https://i.imgur.com/II14v2c.png" />
</figure>
</td>
<td>
<figure class="image image_resized" style="width: 72.03%">
<img src="https://i.imgur.com/IAZF2Rz.png" />
</figure>
</td>
<td>
<figure class="image image_resized" style="width: 75.72%">
<img src="https://i.imgur.com/iJ2kk8j.png" />
</figure>
</td>
</tr>
<tr>
<td colspan="3">
<p style="text-align: center"><strong>Mail List:</strong></p>
</td>
</tr>
<tr>
<td>
<p style="text-align: center"><strong>123</strong></p>
<p style="text-align: center"><i>foo@gmail.com</i></p>
</td>
<td>
<p style="text-align: center"><strong>456</strong></p>
<p style="text-align: center"><i>foo2@gmail.com</i></p>
</td>
<td>
<p style="text-align: center"><strong>789</strong></p>
<p style="text-align: center"><i>foo3@gmail.com</i></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>该表在桌面上看起来相当不错，但在移动分辨率上它有一些问题。
移动可视化实际上搞砸了，请有人告诉我如何优化上面的表格以便在桌面和移动设备上都能正确显示？
非常感谢
解决方案
问题在于您的图像太大，我已将其替换为引导程序中的响应式图像类。您可以在此处找到更多相关详细信息。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head></head>
<body>
<table class="table">
<tbody>
<tr>
<td>
<p style="text-align: center">
<strong>TELEPHONE CALL CENTER</strong>
</p>
<p style="text-align: center"> </p>
<p style="text-align: center"><strong>Timetables:</strong></p>
<p style="text-align: center">
Monday and Friday: <strong>9.00 - 12.00</strong>
</p>
<p style="text-align: center">
Tuesday and Thursday: <strong>15.00 – 17.00</strong>
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center">
It is possible to access the call-center services, at the
scheduled times, by calling the following numbers:
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center"><strong>0000-00000</strong></p>
<p style="text-align: center"><strong>000-00000</strong></p>
<p style="text-align: center"><strong>000-00000</strong></p>
<p style="text-align: center"> </p>
</td>
<td>
<p style="text-align: center"><strong>WHATSAPP DOORS</strong></p>
<p style="text-align: center"> </p>
<p style="text-align: center"><strong>Timetables:</strong></p>
<p style="text-align: center">
Monday and Friday: <strong>9.00 - 12.00</strong>
</p>
<p style="text-align: center">
Tuesday and Thursday: <strong>15.00 – 17.00</strong>
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center">
It is possible to access the Whatsapp counters, at the scheduled
times, by sending a message to the following telephone numbers:
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center"><strong>000-000000</strong></p>
<p style="text-align: center"><strong>000-0000000</strong></p>
</td>
<td>
<p style="text-align: center">
<strong>SKYPE AUDIO-VIDEO DOORS</strong>
</p>
<p style="text-align: center"> </p>
<p style="text-align: center"><strong>Orari:</strong></p>
<p style="text-align: center">
Monday and Friday: <strong>9.00 - 12.00</strong>
</p>
<p style="text-align: center">
Tuesday and Thursday: <strong>15.00 – 17.00</strong>
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center">
It is possible to access the Skype counters, at the scheduled
times, by contacting the following addresses:
</p>
<p style="text-align: center"><strong> </strong></p>
<p style="text-align: center"><strong>ID: foo</strong></p>
<p style="text-align: center"><strong>ID: foo2</strong></p>
<p style="text-align: center"><strong>ID: foo3</strong></p>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
<img src="https://i.imgur.com/II14v2c.png" class="img-fluid"/>
</td>
<td>
<img src="https://i.imgur.com/IAZF2Rz.png" class="img-fluid"/>
</td>
<td>
<img src="https://i.imgur.com/iJ2kk8j.png" class="img-fluid"/>
</td>
</tr>
<tr>
<td colspan="3">
<p style="text-align: center"><strong>Mail List:</strong></p>
</td>
</tr>
<tr>
<td>
<p style="text-align: center"><strong>123</strong></p>
<p style="text-align: center"><i>foo@gmail.com</i></p>
</td>
<td>
<p style="text-align: center"><strong>456</strong></p>
<p style="text-align: center"><i>foo2@gmail.com</i></p>
</td>
<td>
<p style="text-align: center"><strong>789</strong></p>
<p style="text-align: center"><i>foo3@gmail.com</i></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>