包含图像白色边框的表格(Chrome)

Question

编辑:它在Firefox中工作得很好；它似乎只在chrome上发生。

我正在写一个应用程序，它需要我将图像切成碎片，并将它们存储在表中。为此，我使用以下(这是生成的) html

​

.no-padding {padding: 0!important;}

<table class="table" id="game_puzzle">
    <tbody>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_4.png" style="width:100%">
            </td>
        </tr>
    </tbody>
</table>

​

上面的代码在大多数屏幕尺寸上看起来都很好，例如：

​

​

但在其他屏幕尺寸(不仅仅是较小的屏幕)上，它看起来是这样的：

​

​

我该怎么解决这个问题？

Answer 1

你在使用bootstrap框架吗？如果没有，请手动移除表格的边框，如下所示。

table, tr, th, td {
    border: 0;
}

你仍然面临着这个问题。请更新您的代码片段。