Is it possible to put a drop-down menu in a table cell, and have the menu (when not dropped down) occupy the entire height of the cell? Using just html & css?
I want the user to be able to click anywhere in the cell to activate the drop-down.
The row heights vary unpredictably, so hard-coding a constant height isn't possible.
Below is a demo .html file. Here's what I get in Firefox 84.0. I want the drop-down in the second row to occupy the full height of the row.
!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>
question from:
https://stackoverflow.com/questions/65557564/make-select-in-table-cell-occupy-entire-row-height 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
