无法格式化我的表格宽度以在移动设备上进行调整答案

【问题标题】：unable to format my table width to adjust on mobile device无法格式化我的表格宽度以在移动设备上进行调整
【发布时间】：2020-09-25 18:56:55
【问题描述】：

我正在尝试将代码块插入我的 blogspot。

这是我在 blogger.com 中为我的博客在高级 - 添加 CSS 部分下添加的自定义 CSS

#scripttable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%
  border: 1px solid #ddd;
}

#scripthead {
  text-align: left;
  padding: 8px;
  background-color: #FFFFFF;
  color: black;
}

#scriptdata {
  text-align: left;
  padding: 8px;
  background-color: #00003F;
  color: white;
}

在html中我使用如下

<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>

现在我可以在桌面上查看代码 sn-p 时正确突出显示，但在移动设备上，表格超出了博客文章的宽度。

这是我的博客，在移动设备上查看时不正确。请帮助我了解如何解决此问题，以便表格在移动设备上自动调整 https://novicejava1.blogspot.com/2020/06/how-to-build-and-deploy-python-kivy.html

【问题讨论】：

在移动视图中尝试了该链接，它看起来不错
您的网站没有响应。您在 <body> 标签和 .content-outer 上设置了 1200px 的最小宽度
你还有一个meta标签来控制你的移动视图：<meta content="width=1100" name="viewport">
你能告诉我如何解决它
查看这个类似的问题。好像有类似的问题stackoverflow.com/questions/11117927/…

标签： html css blogs

【解决方案1】：

我能够通过使用 style="overflow-x: auto;" 将我的表格包装在 div 容器中来更新 html 内容来解决表格宽度问题。

<div style="overflow-x: auto;">
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
</div>

这次更改后，现在可以在移动设备上正常进行渲染了。

【讨论】：