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

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 >
      <button >  operator:0.20.1</button>
      <button >critical: 2</button>
      <button >heigh: 1</button>
      <div >
        <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 >
      <button >  operator:0.20.1</button>
      <button >critical: 2</button>
      <button >heigh: 1</button>
      <div >
        <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 >

      <table>
        <tr>
          <td style="width: 100%"><button >  clickhouse-operator:0.20.1</button></td>
          <td style="width: 100%"><button >critical: 2</button></td>
          <td style="width: 100%"><button >heigh: 1</button></td>
          <td>
            <div >
              <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 >  clickhouse-operator:0.20.1</button></td>
          <td style="width: 100%"><button >critical: 2</button></td>
          <td style="width: 100%"><button >heigh: 1</button></td>
          <td>
            <div >
              <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!

CodePudding user response：

Without touching your CSS, I tried to re-create what you wanted in this fiddle and think I was successful by shifting where your dropdown element is; ie: I created a new tr element and stored the dropdown div in a td element with a colspan of 3 (to match the prior tr's size) - here's a working example by editing your HTML (but keep the same CSS).

Working example in JSFiddle: https://jsfiddle.net/ilanpatao/5zytep0b/12/

Updated HTML:

<div >

  <table>
    <tr>
      <td style="width: 100%"><button >  clickhouse-operator:0.20.1</button></td>
      <td style="width: 100%"><button >critical: 2</button></td>
      <td style="width: 100%"><button >heigh: 1</button></td>
    </tr>
    <tr>
      <td colspan=3>
        <div >
          <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 >  clickhouse-operator:0.20.1</button></td>
      <td style="width: 100%"><button >critical: 2</button></td>
      <td style="width: 100%"><button >heigh: 1</button></td>
    </tr>
    <tr>
      <td colspan=3>
        <div >
          <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>
</div>

This might be able to point you in the right direction with a little finessing/tweaking;

CodePudding user response：

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 so that hovering anywhere in the row will trigger display:block for that row's particular grey table.
Made the left-most buttons have width:100% so that they'd be the same width even with different content.
Added script to make the abspos table have the same width as the parent table. See comment below.

// The script is to make the grey abspos table the same
// width as the parent table. I don't know if that's what
// you want. If the grey table can be any width, then
// just delete this crap.

document.body.offsetTop;
const width = bigtable.offsetWidth;
document.querySelectorAll(".dropdown-content > table").forEach((abspos) => {
  abspos.style.width = width   "px";
});

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

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

<table id="bigtable">
  <tr >
    <td style="width: 100%"><button >  clickhouse-operator:0.20.1</button>
      <div >
        <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 style="width: 100%"><button >critical: 2</button></td>
    <td style="width: 100%"><button >heigh: 1</button></td>
  </tr>
  <tr >
    <td style="width: 100%"><button >  clickhouse-operator:0.20.1 longer</button>
      <div >
        <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 style="width: 100%"><button >critical: 2</button></td>
    <td style="width: 100%"><button >heigh: 1</button></td>
  </tr>
</table>