html - 使用缓动和缩放时表格单元格中的间隙

Question

在这个例子中Click here我有一个表格，当您将鼠标悬停在一行上时，它会展开。如何阻止其中出现白色间隙？

编辑:我已经发布了下面的 html 以及正在使用的 CSS。这应该足够了。如果不是，请使用上面的 Fiddle 链接。

编辑:这似乎是一个仅限 chrome 的问题，并且在 Firefox 中似乎不存在。有谁知道 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>

对应的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;
}

Answer 1

显然，这个问题只发生在我的 fiddle 中。我使用 html 文件对此进行了测试，它运行良好，没有空白。

亲自尝试一下，如果您还有其他问题，请告诉我。

编辑:尝试将您的 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);
   -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;
    }   

我已将 transform:scale(1.1, 1.1); 更改为 transform:scale(1, 1); 现在可以正常工作了。

Fiddle