How to put space between rows of a table which also have box shadow effect on hover?

Question

Is there any better way to put space (gap) between rows of a table. I tried various methods but none is working. I tried border-spacing , margin , padding and border to create gap but they didn't work. I also have box-shadow effect on hover so can't use transparent border. Here's my code:

  body { background-color:#f1f4f9; } #tbstud { width:50%; border-collapse:collapse; text-align:center; } #tbstud th, #tbstud td { padding:15px; background-color:#ffffff; } #tbstud tr { -webkit-transition:box-shadow 0.3s linear; -moz-transition:box-shadow 0.3s linear; -o-transition:box-shadow 0.3s linear; -ms-transition:box-shadow 0.3s linear; transition:box-shadow 0.3s linear; } #tbstud tr:hover { -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } 

  <table id="tbstud"> <tr> <th>Sr. No.</th> <th>Roll No.</th> <th>Name</th> <th>Class</th> <th>Address</th> </tr> <tr> <td>1</td> <td>101</td> <td>Student 1</td> <td>MSc</td> <td>City 1</td> </tr> <tr> <td>2</td> <td>102</td> <td>Student 2</td> <td>BCA</td> <td>City 2</td> </tr> <tr> <td>3</td> <td>103</td> <td>Student 3</td> <td>BCA</td> <td>City 3</td> </tr> <tr> <td>4</td> <td>104</td> <td>Student 4</td> <td>BA</td> <td>City 4</td> </tr> <tr> <td>5</td> <td>105</td> <td>Student 5</td> <td>B.Tech.</td> <td>City 5</td> </tr> </table> 

Answer 1

I think you need something like this!

   <style>
 body {
  background-color:#f1f4f9;
 }

 #tbstud {
  width:50%;
  border-collapse:collapse;
  text-align:center;
 }

 #tbstud th, #tbstud td {
  padding:15px;
  background-color:#ffffff;
 }

 #tbstud tr {
  -webkit-transition:box-shadow 0.3s linear;
  -moz-transition:box-shadow 0.3s linear;
  -o-transition:box-shadow 0.3s linear;
  -ms-transition:box-shadow 0.3s linear;
  transition:box-shadow 0.3s linear;
 }

 #tbstud tr:hover {
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 #tbstud .empty-td {
  border-left: none;
  border-right: none;
  background: transparent!important;
  padding: 5px;
 }
</style>
<table id="tbstud">
 <tr>
  <th>Sr. No.</th>
  <th>Roll No.</th>
  <th>Name</th>
  <th>Class</th>
  <th>Address</th>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>1</td>
  <td>101</td>
  <td>Student 1</td>
  <td>MSc</td>
  <td>City 1</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>2</td>
  <td>102</td>
  <td>Student 2</td>
  <td>BCA</td>
  <td>City 2</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>3</td>
  <td>103</td>
  <td>Student 3</td>
  <td>BCA</td>
  <td>City 3</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>4</td>
  <td>104</td>
  <td>Student 4</td>
  <td>BA</td>
  <td>City 4</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>5</td>
  <td>105</td>
  <td>Student 5</td>
  <td>B.Tech.</td>
  <td>City 5</td>
 </tr>
</table>

Answer 2

Adding space between tr has many solutions like using padding but nothing is elegant and suits your requirement

tr>td
{
  padding-bottom : 10px;
}

Maybe the solution you are looking for is to add an extra between rows but this is not an elegant way.

<table>
  <tr>
    <td>
      displayed cell
    </td>
  <tr>
  <tr class="spacingRow">
   <td></td>
  </tr>
</table>

I suggest you to use a simple div tag structure to render you UI. If its feasible to your requiremnt

This answer already discussed regarding the the problem of adding space between table rows

Wishing you luck in finding a better way :).