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

Question

我正在尝试在我的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>

现在，当我在台式机上查看时，我能够正确突出显示代码段，但在移动设备上，该表已超出博客文章的宽度。

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

Answer 1

我通过使用样式=“ 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>

现在，此更改后，渲染可以在移动设备上正确进行。