I am trying to add a hover effect to my table rows, but when I apply the CSS styles for this behavior, the rows start wrapping. Here's a comparison of how the table rows look before and after applying the styles. You can see the wrapping issue in the screenshot labeled after.
Is there a solution to prevent the table rows from wrapping?
.table_class tr {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
background: #2098D1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.table_class tr:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #e1e1e1;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 100%;
transform-origin: 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.table_class tr:hover,
.table_class tr:focus,
.table_class tr:active {
color: white;
}
.table_class tr:hover:before,
.table_class tr:focus:before,
.table_class tr:active:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}<div class="col-md-9">
<div class="row">
<!-- TOP -->
<table class="table table-bordered table_class">
<tbody>
<thead>
<tr>
<th colspan="2" class="child_meaning">Meaning of Aadi</th>
</tr>
</thead>
<tr>
<td>Name : </td>
<td>Aadi</td>
</tr>
<tr>
<td>Meaning : </td>
<td>Adornment, Beginning, Perfect, Most important, Ornament, Unequalled</td>
</tr>
<tr>
<td>Gender : </td>
<td>Boy</td>
</tr>
<tr>
<td>Numerology : </td>
<td>6</td>
</tr>
<tr>
<td>Syllables : </td>
<td>2</td>
</tr>
<tr>
<td>Religion : </td>
<td>Hindu</td>
</tr>
<tr>
<td>Rashi : </td>
<td>Mesha</td>
</tr>
<tr>
<td>Nakshatra : </td>
<td>Krithika</td>
</tr>
</tbody>
</table>
</div>
</div>