包含圖片白色邊框的表（Chrome）

Question

編輯：它在Firefox中正常工作;它似乎只發生在鉻上。

我在寫一個應用程序，它要求我將圖像剪切成片並將它們存儲在表中。要做到這一點我用下面的（這是產生）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

你使用引導框架？如果不是手動刪除邊框的表格，如下所示。

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

你還在面對這個問題。請更新您的代碼片段。