gpt4 book ai didi

html - 是什么阻止了这个 HTML 表格的完全响应?

转载 作者:太空宇宙 更新时间:2023-11-04 01:34:26 25 4
gpt4 key购买 nike

我为日程表创建了一个表格,当它在浏览器中调整大小时,当我尝试通过手机访问时,它无法完全调整大小。当我水平滚动时,它在手机上看起来像这样:

enter image description here

在我的手机上,星期四的一半时间会中断。我已经尝试了我能想到的一切。我不是最有经验的编码员,所以我的代码可能有点不整洁。任何人都可以发现为什么这不起作用吗?或者我可以做些什么来稍微调整一下?

非常感谢任何帮助。

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com