Таблица содержит изображения белые границы (Хром)

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

Вы используете платформу bootstrap? Если не удалить границу для таблицы вручную, как показано ниже.

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

Все еще вы столкнулись с проблемой. Обновите фрагмент кода.