使用显示属性table-row在div上显示div

我试图把一些数据在表格格式。我想把数据放在div中，但也格式化了，所以我使用了display:table-row在div上。我还希望能够显示一个div(<div class='hover'>)与选项在表行div(<div class='row'>)上，当有人悬停在它上面。

CSS

.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.row {
width: 100%;
display: table-row;
}
.column {
display: table-cell;
vertical-align: middle;
}
.hover {
width: 100%;
display: none;
z-index: 5;
position: absolute;
height: 100%;
background-color: #fff;
opacity: 0.3;
}

HTML

<div class='table'>
    <div class='row'>
        <div class='column'>ID</div>
        <div class='column'>Room</div>
        <div class='column'>Name</div>
        <div class='column'>Photo</div>
        <div class='column'>Deposit Money</div>
        <div class='column'>Balance</div>
    </div>
    <div class='row content'>
        <div class='hover'></div>
        <div class='column'>".$row['id']."</div>
        <div class='column'>".$row['room']."</div>
        <div class='column'>".$row['name']."</div>
        <div class='column'><img src='' width='80' height='80'></div>
        <div class='column'>".$row['total']."</div>
        <div class='column'>".$row['current']."</div>
    </div>
</div>

jQuery

$('.content').bind({
                mouseenter: function(){
                    $('.hover').each(function(){
                        $(this).show();
                    });
                },
                mouseleave: function() {
                    $('.hover').each(function(){
                        $(this).hide();
                    });
                }
            });

问题是当我悬停在<div class='row'>, <div class='hover'>出现，但它将行中的所有元素移动一个单元格。

$('.content').bind({
  mouseenter: function() {
    $('.hover').each(function() {
      $(this).show();
    });
  },
  mouseleave: function() {
    $('.hover').each(function() {
      $(this).hide();
    });
  }
});

.row {
  display: flex;
  text-align: center;
}
.column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items:  center;
}
.row.header .column {
  border:1px solid lightblue;
  background: rgba(0,0,255,0.5);
  padding: 1em;
}
.row.content .column {
  border:1px solid lightgreen;
  background: #bada55;
}
.content {
  position: relative;
}
.hover {
  width: 100%;
  display: none;
  z-index: 5;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,.3);
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table'>
      <div class='row header'>
        <div class='column'>ID</div>
        <div class='column'>Room</div>
        <div class='column'>Name</div>
        <div class='column'>Photo</div>
        <div class='column'>Deposit Money</div>
        <div class='column'>Balance</div>
    </div>
    <div class='row content'>
        <div class='hover'> I'M AN OVERLAY</div>
        <div class='column'>ID</div>
        <div class='column'>ROOM</div>
        <div class='column'>NAME</div>
        <div class='column'><img src="http://lorempixel.com/output/people-q-c-80-80-6.jpg"/></div>
        <div class='column'>TOTAL</div>
        <div class='column'>CURRENT</div>
    </div>
</div>