html - Spacing between rows -

i have divs set specific displays mimic table. want achieve style shown in image when row selected. have tried padding , margins doesn't seem work. has idea how can this?

.table {    display: table;  }  .header {    display: table-header-group;    font-weight: bold;  }  .row {    display: table-row-group;  }  .cell {    display: table-cell;    border: 1px solid black;    padding: 5px;  }  .selected {    background: red;    margin: 20px;    border: 1px solid red;    border-radius: 10px;  }

<div class="table">    <div class="header">      <div class="cell">header 1</div>      <div class="cell">header 2</div>    </div>    <div class="row selected">      <div class="cell">row 1 cell 1</div>      <div class="cell">row 1 cell 2</div>    </div>    <div class="row">      <div class="cell">row 2 cell 1</div>      <div class="cell">row 2 cell 2</div>    </div>    <div class="row">      <div class="cell">row 3 cell 1</div>      <div class="cell">row 3 cell 2</div>    </div>  </div>

is you're looking for?

$('.row').on('click', function () {     $('.table div').removeclass('selected');     $(this).addclass('selected'); }); 

fiddle: http://jsfiddle.net/dzbx8dkt/

edit: realized focus here css styling, not functionality. right? maybe best option div absolutely positioned on selected row.