使表格单元格中的 <select> 占据整个行高

Question

是否可以在表格单元格中放置下拉菜单，并让菜单（未下拉时）占据单元格的整个高度？只使用 html 和 css？

我希望用户能够单击单元格中的任意位置以激活下拉菜单。

行高变化不可预测，因此不可能硬编码一个恒定的高度。

下面是一个演示 .html 文件。这是我在 Firefox 84.0 中得到的。我希望第二行的下拉菜单占据该行的整个高度。

!DOCTYPE html>
<html lang="en-us">
<head> <meta charset="UTF-8">
<style>
table {
  border: 3px solid lightblue;
  border-collapse: collapse;
  padding: 0;
  background-color: lightgrey;
}
th, td { 
  padding: 1px;
  border: 1px solid red;
  font-size: small;
} 
select {
  border: 0;
}
</style>
</head>

<body>
<table>
  <tr>
    <td>Short and to the point.</td>
    <td>
      <select> <option>Apple</option> <option>Orange</option> </select>
    </td>
  </tr>
  <tr>
    <td>A multi-line (or wrapped)<br />message<br />makes this row higher</td>   
    <td>
      <select> <option>Apple</option> <option>Orange</option> </select>
    </td>
  </tr>
</table>
</body>
</html>

Answer 1

这样的事情怎么样。我在选择中添加了一些 CSS 和 100% 宽度高度。我只添加了第二个选择，但您可以将其添加到 css 以将其应用于所有选择。

table {
    width: 100%;
    border: solid 1px lightblue;
    border-collapse: collapse;
    height: 100%;
}

table th td {
    padding: 1px;
    border: 1px solid red;
    font-size: small;
}

table td {
    border: solid 1px lightblue;
    height: 100%;
}

select {
    border: 0;
    width: 100%;
    height: 100%;
}

<table>
  <tr>
    <td>Short and to the point.</td>
    <td>
      <select> <option>Apple</option> <option>Orange</option> </select>
    </td>
  </tr>
  <tr>
    <td>A multi-line (or wrapped)<br />message<br />makes this row higher</td>   
    <td>
      <select> <option>Apple</option> <option>Orange</option> </select>
    </td>
  </tr>
</table>