为什么滚动条显示在表格单元格中？

Question

我在表格单元格中有一些复选框，当行数超过三行时，我需要一个垂直滚动条，这是可行的。但是，当只有三行时，会显示滚动条。就像复选框集底部有一个间隙，大于复选框行之间的行距。我在 Chrome 中运行它。

这是我的代码：

body {
  background-color: EDF2F4;
}

* {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: text-top;
  font-family: Segoe UI;
}

label {
  font-size: 12;
  white-space: nowrap;
}

div.addresses {
  line-height: 0.3;
  text-align: left;
  width: 100%;
  height: 100%;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

<table>
  <td style='width:350px; height:44px; border: 1px solid #a3a3a3'>
    <div class='addresses'>
      <label for="1104"><input type="checkbox" id="1104" name="address" value="1104" onchange="filter()">address1</label>
      <label for="1672"><input type="checkbox" id="1672" name="address" value="1672" onchange="filter()">address2y</label>
      <label for="1674"><input type="checkbox" id="1674" name="address" value="1674" onchange="filter()">address3</label>
      <label for="1708"><input type="checkbox" id="1708" name="address" value="1708" onchange="filter()">address4</label>
      <label for="1729"><input type="checkbox" id="1729" name="address" value="1729" onchange="filter()">address5</label>
      <label for="1818"><input type="checkbox" id="1818" name="address" value="1818" onchange="filter()">address6y</label>
      <label for="1820"><input type="checkbox" id="1820" name="address" value="1820" onchange="filter()">address7</label>
      <label for="1821"><input type="checkbox" id="1821" name="address" value="1821" onchange="filter()">address8</label>
      <label for="1840"><input type="checkbox" id="1840" name="address" value="1840" onchange="filter()">address9</label>
      <label for="1845"><input type="checkbox" id="1845" name="address" value="1845" onchange="filter()">address10</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
    </div>
  </td>
</table>

Answer 1

您可以在 div.address 上设置min-height: 3em，这样它至少可以容纳 3 行全文。

// just for demonstration purposes
window.toggle.addEventListener('click', () => {
  window.additionalboxes.toggleAttribute('hidden');
});

body {
  background-color: EDF2F4;
}

* {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: text-top;
  font-family: Segoe UI;
}

label {
  font-size: 12;
  white-space: nowrap;
}

div.addresses {
  line-height: 0.3;
  text-align: left;
  width: 100%;
  height: 100%;
  overflow: auto;
  min-height: 3em;
}

table {
  border-collapse: collapse;
}

<table>
  <td style='width:350px; height:44px; border: 1px solid #a3a3a3'>
    <div class='addresses'>
      <label for="1104"><input type="checkbox" id="1104" name="address" value="1104" onchange="filter()">address1</label>
      <label for="1672"><input type="checkbox" id="1672" name="address" value="1672" onchange="filter()">address2y</label>
      <label for="1674"><input type="checkbox" id="1674" name="address" value="1674" onchange="filter()">address3</label>
      <label for="1708"><input type="checkbox" id="1708" name="address" value="1708" onchange="filter()">address4</label>
      <label for="1729"><input type="checkbox" id="1729" name="address" value="1729" onchange="filter()">address5</label>
      <label for="1818"><input type="checkbox" id="1818" name="address" value="1818" onchange="filter()">address6y</label>
      <label for="1820"><input type="checkbox" id="1820" name="address" value="1820" onchange="filter()">address7</label>
      <label for="1821"><input type="checkbox" id="1821" name="address" value="1821" onchange="filter()">address8</label>
      <label for="1840"><input type="checkbox" id="1840" name="address" value="1840" onchange="filter()">address9</label>
      <label for="1845"><input type="checkbox" id="1845" name="address" value="1845" onchange="filter()">address10</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <span id="additionalboxes" hidden><!-- just for demonstration purposes -->
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address11y</label>
      <label for="1862"><input type="checkbox" id="1862" name="address" value="1862" onchange="filter()">address12y</label>
      </span>
    </div>
  </td>
</table>

<!-- just for demonstration purposes -->
<br>
<button id="toggle">toggle 3/4 rows of checkboxes</button>