Button Menu Below Table Row When Mouse Over

I am doing a project where I will have lots of information on a single row of a table. So to not lose space, I'm trying to find a way to put a centralized row with buttons, just be

Solution 1:

Are you looking for something like this?

$(document).ready(function() {

  $('#mytable tbody tr').hover(function() {
    $(this).addClass('hover');

    var rowP = $(this).offset();
    var rowH = $(this).height();
    var offset = rowP.top + rowH;
    var left = $('td:first', $(this)).width() + 20;

    $('td:first', $(this)).prepend($('.button-pane'));
    $('.button-pane', $(this)).css({
      'margin-top': offset + 'px',
      'margin-left': left + 'px'
    }).show();

  }, function(event) {
    $(this).remove('.button-pane');
    $(this).removeClass('hover');
    $('.button-pane').hide();
  });


});

#mytabletbodytr:hover {
  background-color: lightblue;
}

.button-pane {
  display: none;
  position: absolute;
  float: left;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  width: 150px;
  height: 30px;
  padding: 4px;
  text-align: center;
}

.button-panebutton {
  display: inline;
  cursor: pointer;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="mytable"border="1"width="100%"><thead><tr><td>HEADER 1</td><td>HEADER 2</td><td>HEADER 3</td><td>HEADER 4</td></tr></thead><tbody><tr><td>Item 1</td><td>a</td><td>aa</td><td>aaa</td></tr><tr><td>Item 2</td><td>b</td><td>bb</td><td>bbb</td></tr><tr><td>Item 3</td><td>c</td><td>cc</td><td>ccc</td></tr></tbody></table><divclass="button-pane"><buttonid="button1">Button 1</button><buttonid="button2">Button 2</button></div>