In the table, the first column indicates the position ‘sticky’, which opens a drop-down menu position: absolute. But the subsequent column overlaps the menu that opens.
/* Dropdown Button */
.dropbtn {
background-color: #04aa6d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
z-index: 99999;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 99999;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
z-index: 9999;
}
.container {
max-width: 500px;
margin: auto;
margin-top: 3rem;
overflow-x: auto;
}
table {
font-family: "Open Sans", sans-serif;
position: relative;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
width: 100%;
border: none;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
white-space: nowrap;
}
table * {
border: none;
}
table thead tr {
color: #2d3748;
font-size: 1rem;
font-weight: 500;
text-align: left;
}
table thead tr th {
background: #edf2f7;
padding: 0.75rem 1.5rem;
vertical-align: middle;
}
table tbody tr:nth-child(odd) td {
background: #ffffff;
}
table tbody tr:nth-child(even) td {
background: #edf2f7;
}
table tbody td {
color: #1a202c;
text-align: left;
padding: 1.5rem 1.5rem;
vertical-align: middle;
font-size: 1.125rem;
font-weight: normal;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 0.5rem;
}
table th:first-child {
border-top-left-radius: 0.5rem;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 0.5rem;
}
table th:last-child {
border-top-right-radius: 0.5rem;
}
table tr > th:first-child,
table tr > td:first-child {
position: sticky;
z-index: 2;
left: 0;
}
<div class="container">
<table>
<thead>
<tr>
<th>DATA1</th>
<th>DATA2</th>
<th>DATA3</th>
<th>DATA4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</td>
<td>Some values</td>
<td>Some values</td>
<td>Some values</td>
</tr>
<tr>
<td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</td>
<td>Other values</td>
<td>Other values</td>
<td>Other values</td>
</tr>
<tr>
<td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</td>
<td>Other values</td>
<td>Other values</td>
<td>Other values</td>
</tr>
<tr>
<td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</td>
<td>Other values</td>
<td>Other values</td>
<td>Other values</td>
</tr>
</tbody>
</table>
</div>
I tried to set z-index – it didn’t help.
Maybe someone has come across something like this. Thank you in advance.
2
Answers
One option (a bit manual) is to give the
tr
sposition: relative
and then give each one a higher z-index than the one below:What you’re trying to do is simply not possible. Either you should remove position ‘sticky’ and replace it with ‘relative’. Or create a separate menu out of ‘container’ and attach to button dynamically (a bit complicated).
See this link for more information.