我为日程表创建了一个表格，当它在浏览器中调整大小时，当我尝试通过手机访问时，它无法完全调整大小。 当我水平滚动时，它在手机上看起来像这样:
在我的手机上，星期四的一半时间会中断。 我已经尝试了我能想到的一切。 我不是最有经验的编码员，所以我的代码可能有点不整洁。 任何人都可以发现为什么这不起作用吗？或者我可以做些什么来稍微调整一下？
非常感谢任何帮助。
body {
font-family: proxima nova;
}
th,
td {
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}
td {
padding: 1% 2%;
}
th {
background: #44A499;
color: white;
padding: 1% 2%;
}
td:hover {
cursor: pointer;
background: #44A499;
color: white;
}<table width="100%" align="center">
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Thrusday</th>
</tr>
</div>
<tr>
<th>16:15 - 17:45 </th>
<td>
<!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td>
<td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td title="No Class" class="Holiday"></td>
</div>
</tr>
<tr>
<th>18:00 - 19:45</td>
<td>Dynamic Yoga at the Dragon Theater, Barmouth.</td>
<td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
</div>
</tr>
</div>
</tr>
</table>最佳答案
代码中有一些错误。我删除了表中的 div，还有一些错误(<th> 标签以 </td> 标签结束，并且重复了一些结束 tr 标签)。
这一切都对我有用。
我建议，为了使表格更具可读性，按照 w3schools 的建议添加容器元素 - 在示例中是 <div> - 带有 overflow-x:auto , 以便在屏幕太小无法显示全部内容时显示水平滚动条。
这是 w3schools 链接到页面“如何 - 响应表”:https://www.w3schools.com/howto/howto_css_table_responsive.asp
这是没有 <div> 的代码和 <th>标记更正，在 iPhone 5s 上的 Safari 上测试:
<head>
<title>Yoga Classes</title>
<style type="text/css">
body {
font-family: proxima nova;
}
th,td {
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}
td {
padding: 1% 2%;
}
th {
background: #44A499;
color: white;
padding: 1% 2%;
}
td:hover {
cursor: pointer;
background: #44A499;
color: white;
}
</style>
</head>
<body>
<table width="100%" align="center" >
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Thrusday</th>
</tr>
<tr>
<th>16:15 - 17:45 </th>
<td><!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td>
<td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td title="No Class" class="Holiday"></td>
</tr>
<tr>
<th>18:00 - 19:45</th>
<td>Dynamic Yoga at the Dragon Theater, Barmouth.</td>
<td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
</tr>
</table>
</body>
关于html - 是什么阻止了这个 HTML 表格的完全响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46502926/