画像に白い枠線が含まれている表（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; 
} 

まだ問題が発生しています。コードスニペットを更新してください。