Search code examples
javascripthtmlcsshtml-tablehover

CSS on hover effect on a <td> does not wok properly

I would like to make a dropdown list within every td of a table, something like this:

<!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;
      }

      .btncritical {
        background-color: #fc0303;
        color: black;
        padding: 16px;
        font-size: 16px;
        border: none;
        border: 2px solid #ccc;
      }

      .btnheigh {
        background-color: #fc7703;
        color: black;
        padding: 16px;
        font-size: 16px;
        border: 2px solid #ccc;
      }

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .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: 1;
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown-content a:hover {
        background-color: #ddd;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }

      .dropdown:hover .dropbtn {
        background-color: #3e8e41;
      }

    </style>
  </head>

  <body>

    <div class="dropdown">
      <button class="dropbtn">+ operator:0.20.1</button>
      <button class="btncritical">critical: 2</button>
      <button class="btnheigh">heigh: 1</button>
      <div class="dropdown-content">
        <table style="width:100%">
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
        </table>
      </div>
    </div> <br>

    <div class="dropdown">
      <button class="dropbtn">+ operator:0.20.1</button>
      <button class="btncritical">critical: 2</button>
      <button class="btnheigh">heigh: 1</button>
      <div class="dropdown-content">
        <table style="width:100%">
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
        </table>
      </div>
    </div>

  </body>

</html>

Which works perfectly. However, because I will generate the content automatically (the first cell) I would like the dropbtn buttons to have constant width. I thought I could put it in another table, however, it seems that hovering stopped working:

<!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;
      }

      .btncritical {
        background-color: #fc0303;
        color: black;
        padding: 16px;
        font-size: 16px;
        border: none;
        border: 2px solid #ccc;
      }

      .btnheigh {
        background-color: #fc7703;
        color: black;
        padding: 16px;
        font-size: 16px;
        border: 2px solid #ccc;
      }

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .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: 1;
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown-content a:hover {
        background-color: #ddd;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }

      .dropdown:hover .dropbtn {
        background-color: #3e8e41;
      }

    </style>
  </head>

  <body>

    <div class="dropdown">

      <table>
        <tr>
          <td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
          <td style="width: 100%"><button class="btncritical">critical: 2</button></td>
          <td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
          <td>
            <div class="dropdown-content">
              <table style="width:100%">
                <tr>
                  <td>Alfreds Futterkiste</td>
                  <td>Maria Anders</td>
                  <td>Germany</td>
                </tr>
                <tr>
                  <td>Centro comercial Moctezuma</td>
                  <td>Francisco Chang</td>
                  <td>Mexico</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
        <tr>
          <td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
          <td style="width: 100%"><button class="btncritical">critical: 2</button></td>
          <td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
          <td>
            <div class="dropdown-content">
              <table style="width:100%">
                <tr>
                  <td>Alfreds Futterkiste</td>
                  <td>Maria Anders</td>
                  <td>Germany</td>
                </tr>
                <tr>
                  <td>Centro comercial Moctezuma</td>
                  <td>Francisco Chang</td>
                  <td>Mexico</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
      </table>

  </body>

</html>

How to solve this? Thanks!

Solution

  • Your first example has two dropdown elements. Your second only has one. So of course both dropdown-content elements will appear on a hover. I think you don't want that.

    • I put the grey abspos table after the button in the first cell instead of the last cell, so that it doesn't show up far to the right.
    • I made each row be class="dropdown" so that hovering anywhere in the row will trigger display:block for that particular row's grey table.
    • Made the left-most buttons have width:100% so that they'd be the same width even with different content.
    • edit: Gave buttons height:100% and gave td a definite height so that the buttons' % height can be resolved.
    • Added script to make the abspos table have the same width as the parent table. See comment below. edit: abspos table now gets its width from width:100% and making tr be the relpos container.

    .dropbtn {
  background-color: #04AA6D;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  width: 100%;
}

.btncritical {
  background-color: #fc0303;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  border: 2px solid #ccc;
}

.btnheigh {
  background-color: #fc7703;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: 2px solid #ccc;
}

button {
  height: 100%;
}

td {
  /* Cell apparently has to have a definite height, even if it is ignored, to resolve a child's % height. */
  height: 10px;
}

.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: 1;
  /* This width: 100% resolves off the relpos containing block, which is the tr.dropdown. */
  width: 100%;
}

.dropdown {
  position: relative;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
    <table id="bigtable">
  <tr class="dropdown">
    <td><button class="dropbtn">+ clickhouse-operator:0.20.1</button>
      <div class="dropdown-content">
        <table style="width:100%">
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>some very very long country name</td>
          </tr>
        </table>
      </div>
    </td>
    <td><button class="btncritical">critical: 2</button></td>
    <td><button class="btnheigh">heigh: 1</button></td>
  </tr>
  <tr class="dropdown">
    <td><button class="dropbtn">+ clickhouse-operator:0.20.1 longer</button>
      <div class="dropdown-content">
        <table style="width:100%">
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
        </table>
      </div>
    </td>
    <td><button class="btncritical">critical: 2</button></td>
    <td><button class="btnheigh">heigh: 1</button></td>
  </tr>
</table>