HTML表格不適用於javascript下拉框

Question

我有一個相對簡單的網頁，無法使表格正常工作。 我有一個輸入字段，序列號和一個html / javascript下拉復選框。 當我拿出桌子時，包括下拉框在內的所有內容都可以正常工作-除了不錯的網絡格式外。 一旦放入表格，網頁就會凍結，其中包括保管箱無法使用。 我認為問題是tr，/ tr和/ table的位置。 這是包含表的代碼，它會導致錯誤，

<div class="col contentHome">
  <h3>New Gateway</h3>
  <form>
    <table>
      <tr><td>Gateway Serial Number:</td><td><input type="text" 
        name="serialnumber" required/></td></tr>
      <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
          <tr><td>Gateway Properties</td><td><select><option>Select an 
            option</option></select></td></tr>
          <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
          <label for="one"><input type="checkbox" id="DG" />Dash Gateway</label>
          <label for="two"><input type="checkbox" id="DC" />Dash Controller</label>
          <label for="three"><input type="checkbox" id="SG" />Steering Gateway</label>
          <label for="three"><input type="checkbox" id="SC" />Steering Controller</label>
          <label for="three"><input type="checkbox" id="BC" />BoomHieght Controller</label>
        </div>
      </div>
    </table> 
    <br>
    <input type="submit" value="Create" />          
    <input type="hidden" 
      name="${_csrf.parameterName}" 
      value="${_csrf.token}"/>  
  </form>
</div>

這是網頁的快照。 如您所見，格式化是正確的，但是我缺少“創建”按鈕，並且下拉框不起作用。

關於表格，tr，td，/ td，/ tr和/ table的放置有什么想法嗎？

Answer 1

如果以前沒有人告訴您將<table>用於布局目的是不好的做法，那么我想您需要聽取我的意見：至少在原則上是這樣。 在實踐中，此類構造的主要缺點之一是無法在需要的情況下在狹窄的設備上快速顯示它們。

---

您發布的代碼的最大問題是您將<div>用作<table>的子級，盡管大多數現代瀏覽器都傾向於原諒它並仍按您期望的方式呈現。 但是，從技術上講，這是非法的HTML。

<table>的唯一合法子級是table元素：

• <tfoot> ，
• <tbody>和
• <thead> 。

如果將<tr>放入其中，它們將自動包裝在<tbody> 。 因此，快速解決方案是將<div>包裝在表元素中：

...
<table>
  ...
  <tr>
    <td colspan="2">
      <div class="multiselect">
        ...
      </div>
    </td>
  </tr>
  ...
</table>

但是正確的解決方法是使用塊級元素創建布局。 使用flexbox，這將是一個初學者：

 .form-row { display: flex; flex-wrap: wrap; } .form-row > .left { flex-basis: 210px; } .form-row > .left ~ * { flex-grow: 1; } 

 <div class="col contentHome"> <h3>New Gateway</h3> <form> <div class="form-row"> <span class="left">Gateway Serial Number:</span> <span><input type="text" name="serialnumber" required></span> </div> <div class="form-row multiselect" onclick="showCheckboxes()"> <span class="left">Gateway Properties:</span> <span> <select> <option>Select an option</option> </select> </span> </div> <div class="overSelect"></div> <div id="checkboxes"> <label for="one"><input type="checkbox" id="DG">Dash Gateway</label> <label for="two"><input type="checkbox" id="DC">Dash Controller</label> <label for="three"><input type="checkbox" id="SG">Steering Gateway</label> <label for="three"><input type="checkbox" id="SC">Steering Controller</label> <label for="three"><input type="checkbox" id="BC">BoomHieght Controller</label> </div> </div> <input type="submit" value="Create"> <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"> </form> </div> 

部署之前，請不要忘記為CSS加上前綴 。

---

注意：如果.overselect應該是某種形式的模式，並且不能與上面的代碼一起使用，則需要使用最小，完整和可驗證的示例來更新您的問題，以便我能為您提供更多幫助。

Answer 2

表格中的div對我來說不太好-如果願意，請參閱規格。 HTML規范-表

就是說，在chrome中，您提供的代碼正在運行。 下拉列表正在運行，所有元素均可見。 如果將divs包裝在表中適當的表row（tr）和data（td）元素內，則CSS可能很好。

 <div class="col contentHome"> <h3>New Gateway</h3> <form> <table> <tr><td>Gateway Serial Number:</td><td><input type="text" name="serialnumber" required/></td></tr> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <tr><td>Gateway Properties</td><td><select><option>Select an option</option></select></td></tr> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one"><input type="checkbox" id="DG" />Dash Gateway</label> <label for="two"><input type="checkbox" id="DC" />Dash Controller</label> <label for="three"><input type="checkbox" id="SG" />Steering Gateway</label> <label for="three"><input type="checkbox" id="SC" />Steering Controller</label> <label for="three"><input type="checkbox" id="BC" />BoomHieght Controller</label> </div> </div> </table> <br> <input type="submit" value="Create" /> <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> </form> </div>