表单元格宽度仅对一个单元格无效！我该如何解决？

Question

我有一个用于表的代码，并且表的所有宽度都适用于我的表，但最后一个搜索功能单元格的宽度应为42.5％，但显示为20％。我不太确定出了什么问题。

<table class="mytable-body">
  <tr>
    <td height=50px style="background-color: #4472C4" colspan="4"><a href="C:\Users\shvan\Documents\MEA-VIA-Interface\Homepage_French.html">Français</a> </td>
  </tr>
  <tr>
    <td width=20%> <img src="VIA_Logo_2.png" /></td>
    <td width=60%>
      <div class="header1">
        <h1>CAE AT YOUR HAND</h1>
      </div>
    </td>
    <td width=20%> <img src="LOGO_RGB.png" /></td>
  </tr>
  <tr>
    <td width=15% style="background-color: #4472C4" rowspan="2">
      <label>
			<h2>Our Recommended Favorites</h2>
			<select size=9 id="myList" class="list-content" onchange="setPicture();">
			</select>
			</label>
    </td>
    <td width=42.5%>
      <input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search for start location..." title="Location">
      <!--the seperate code not working-->
      <label><select size=3 id="myList-1" class="list-content"></select></label>
    </td>
    <td width=42.5%>
      <input type="text" id="mysearchInput2" onkeyup="mysearchFunction2()" placeholder="Search for end location..." title="Location">
      <label><select size=3 id="myList-2" class="list-content" onchange="setPicture2();"></select></label>
    </td>
  </tr>
  <tr>
    <td colspan="2" width=70% style="background-color: aliceblue">
      <div id="qrcode"></div>
      <div id="qrcode2"></div>
    </td>

  </tr>
</table>

Answer 1

您的HTML没有意义。

对于一个，您需要具有相同数量的单元格（或将colspans相加为相同数量）：

• 在第一行中，您有一个单元格，其colspan为4。
• 在第二行中，您有3个单元格。
• 在第三行中，您有3个单元格，一个的colspan为2，总计为4（2 +1 + 1）
• 在第四行中，您有一个单元格，其colspan为2。

所有那些粗体数字必须对于表是相同的。

---

然后，表格的全部要点是，构成列的单元格始终具有相同的宽度。

当前您拥有（例如）：

• 在第二行中，前两个单元的总宽度为80％（20％+ 60％）
• 在第三行中，colspan为2的第一个像元的宽度为15％。
• 在第四行中，colspan为2的第一个像元的宽度为70％。

同样，所有那些粗体数字必须都是相同的。

另外，每行的所有百分比都必须加起来等于100％（或至少有一个没有宽度的单元格，然后它将占用其余的空间）。

---

似乎您正在尝试遗漏使用表格进行布局。表用于表格数据。对于页面布局，请查看CSS网格，但是您需要为每个“行”使用单独的网格。

---

[另外一件事：不要在HTML属性值周围留下引号。这会导致错误。

Answer 2

您应该使用'colspan'属性创建一个表格，每行中的单元格数量不同。另外，我建议使用CSS代替古老的“ height = 50px”表示法。

<tr>
    <td colspan="3" style="height: 50px; background-color: #4472C4" colspan="4"><a href="C:\Users\shvan\Documents\MEA-VIA-Interface\Homepage_French.html">Français</a> </td>
  </tr>