My goal is to create a dropdown list embedded within each td cell of a table, similar to this setup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
...
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">+ operator:0.20.1</button>
...
// Table structure with dropdown content
</div> <br>
<div class="dropdown">
...
// Another table structure with dropdown content
</div>
</body>
</html>This method has been effective so far. However, since I plan to automate the content generation for the first cell, I want the dropbtn buttons to maintain a consistent width. My initial attempt at placing them in another table caused issues with hover functionality:
<!DOCTYPE html>
<html>
<head>
[<meta tag and CSS styles here>]
</head>
<body>
<div class="dropdown">
<table>
[<tr> and <td> elements with styled buttons inside<]
// Embedded table for dropdown content
</table>
</div>
</body>
</html>If you have any insights on how to address this issue, it would be greatly appreciated! Thank you!