skip to Main Content

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


  1. One option (a bit manual) is to give the trs position: relative and then give each one a higher z-index than the one below:

    /* 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;
    }
    
    tr {
      position: relative;
    }
    
    tr:nth-of-type(1) {
      z-index: 10;
    }
    
    tr:nth-of-type(2) {
      z-index: 9;
    }
    
    tr:nth-of-type(3) {
      z-index: 8;
    }
    
    tr:nth-of-type(4) {
      z-index: 7;
    }
    <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>
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search