Break in table cells when using Ease and scaling
For this example Click here I have a table that expands when you hover over a row. How do I stop white spaces from appearing?
Edit: I have posted the html below along with the CSS used. That should be enough to get you going. If not, please use the Fiddle link above.
Edit: This seems to be a chrome-only issue and doesn't seem to be present in Firefox. Does anyone know a workaround for chrome?
Html:
<table class="table-styled">
<tbody>
<tr>
<th>Test</th>
<th>Test 2</th>
<th>Test 3</th>
<th>Test 4</th>
</tr>
<tr>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
</tr>
<tr>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
</tr>
<tr>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
</tr>
<tr>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
<td>Test Data</td>
</tr>
</tbody>
</table>
Relevant CSS:
h1, table.table-styled {
text-align: center;
}
table.table-styled {
width: 80%;
margin: 0 auto 2px;
border-collapse: collapse;
}
table.table-styled th, table.table-styled td {
padding-top:10px;
padding-bottom:10px;
font-size: 10px;
}
table.table-styled tr {
background: #fefefe;
}
table.table-styled tr, table.table-styled td {
margin-bottom: 2px;
}
table.table-styled tr:first-child {
background: #c0c0c0;
}
table.table-styled tr:nth-child(even) {
background: #e3e3e3;
}
table.table-styled tr:hover:not(:first-child) {
-webkit-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
-ms-transform:scale(1.1, 1.1);
-o-transform:scale(1.1, 1.1);
transform:scale(1.1, 1.1);
position: relative;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background-color:black;
color:white;
}
source to share
Apparently this problem only occurs for me in fiddle. I tested this with an html file and it worked fine with no white spaces.
Try it yourself and let me know if you have any further problems.
EDIT: Try changing your css to this:
h1, table.table-styled {
text-align: center;
}
table.table-styled {
width: 80%;
margin: 0 auto 2px;
border-collapse: collapse;
}
table.table-styled th, table.table-styled td {
padding-top:10px;
padding-bottom:10px;
font-size: 10px;
}
table.table-styled tr {
background: #fefefe;
}
table.table-styled tr, table.table-styled td {
margin-bottom: 2px;
}
table.table-styled tr:first-child {
background: #c0c0c0;
}
table.table-styled tr:nth-child(even) {
background: #e3e3e3;
}
table.table-styled tr:hover:not(:first-child) {
-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);
-ms-transform:scale(1, 1);
-o-transform:scale(1, 1);
transform:scale(1, 1);
position: relative;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background-color:black;
color:white;
}
I changed transform:scale(1.1, 1.1);
to transform:scale(1, 1);
and it works fine now.
source to share