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>

以下是该网页的快照。正如您所看到的格式正确但我错过了＆＃34;创建＆＃34;按钮和下拉框不起作用。

有关表格，tr，td，/ td，/ tr和/ table＆＃34的位置的任何想法？

Answer 1

如果没有人告诉你使用<table>进行布局是不好的做法，我想你需要听我说：至少原则上是这样。在实践中，这种结构的一个主要缺点是，如果你需要，就无法在狭窄的设备上显示它们。

您发布的代码的最大问题是您使用<div>作为<table>的孩子，尽管大多数现代浏览器都倾向于原谅它并仍然按照您的预期呈现。但是，从技术上讲，这是非法的HTML。

<table>的唯一合法子女是表格元素：

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

如果您将<tr>放入其中，它们将自动包含在<tbody>中。因此，quickfix是将<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>

在部署之前，不要忘记prefix CSS。

注意：如果.overselect应该是某种模式，并且不能使用上述代码，则需要使用Minimal, Complete, and Verifiable example更新您的问题所以我可以提供更多帮助。

Answer 2

表格中的div对我来说看起来不太好 - 如果你愿意，请参阅规格。 html spec - tables

话虽如此，在Chrome中，您提供的代码正在运行。下拉工作正常，所有元素都可见。如果你将表中的div包装在正确的表行（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>

HTML表格无法使用javascript下拉框

2 个答案: