Question

我为计划创建了一个表，当它在浏览器中调整大小时，当我尝试通过移动设备访问时，它无法完全调整大小。当我水平滚动时，它在手机上看起来像这样：

在我的手机上它会在星期四停止一半。我已经尝试了所有我能想到的东西。我不是最有经验的编码器，因此我的代码可能有些不整洁。任何人都可以发现为什么这不起作用？或者我可以做些什么来调整它？

非常感谢任何帮助。

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>

Answer 1

代码中有一些错误。我删除了表格中的div，还有一些错误（<th>标签以</td>标签关闭，一些关闭的tr标签重复）。一切都对我有用。我建议，为了使表更具可读性，请关注w3schools＆＃39;添加容器元素的建议 - 在示例中为<div> - 带有overflow-x:auto，以便在屏幕太小而无法显示完整内容时显示水平滚动条。

这里的w3schools链接到页面＆＃34;如何 - 响应表＆＃34;：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>

Answer 2

为您修复标记，并将body限制为300px以进行演示。

＆＃13;

body {
  font-family: proxima nova;
  width: 300px;
}

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;
}

＆＃13;

<table width="100%" align="center">
  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Thrusday</th>
    </tr>
  </thead>
  <tbody>
    <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>

  </tbody>
</table>

＆＃13;

是什么阻止了这个HTML表格完全响应？

2 个答案: