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;
}

      

+3


source to share


1 answer


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.

Fiddle

+1


source







All Articles