Question

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

编辑：我已经发布了下面的html和正在使用的CSS。这应该足够了。如果没有，请使用上面的小提琴链接。

编辑：这似乎只是一个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

显然，这个问题只发生在小提琴中。我使用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

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

1 个答案: