html - 如何为移动设备拆分/缩小表格

Question

我试图让这个网站上的表格在移动设备上正常运行： http ://whitehallrow.com/classic-whitehall-spirit-17-slide-seat-model/

页面上有两个表格；规格表和船选项定价表。我希望规格表在中间拆分并换行，以便所有粗体字都在屏幕左侧，数据在右侧。

我还希望定价表变得更窄，这样它就不会超出页面的一侧。我尝试为每列分配一个百分比宽度，但我似乎无法从中得到任何结果。

我不擅长处理 HTML 表格，所以在这里我有点迷失了。我怎样才能让他们合作？

Answer 1

首先，我们不能在这里教你 HTML。你需要自己学习。

其次，恕我直言，该页面设计过度。您是否正在使用一些带有现成主题的内容管理系统？因为对于这样一个简单的网站来说，HTML 和 CSS 太“重”了。这将使更改更加困难，尤其是对于移动“优化”。

对于规格表：只需使用一个包含八行的两列表格，而不是四乘四的表格。

但是，如果您想为桌面浏览器保持相同/相似的布局，那就有点复杂了。

对于价格表：从样式表中删除硬编码style="width: 400px和。width: 100%（后者将影响所有表，但width: 100%在所有表上都不是一个好主意）。这样表格将根据内容和屏幕宽度自动调整大小。您只需要在表格单元格中添加一些填充，这样这些值就不会相互挤压。