Ошибка рендеринга границ ячеек Firefox при добавлении строк

Question

У меня есть таблица со свернутыми границами.Некоторые клетки имеют границы вокруг них.Когда я добавляю строки в эту таблицу, внезапно все ячейки в данном столбце получают границы в Firefox.

CSS достаточно прост

table {
  border-collapse: collapse;
}

.has-errors {
  border: 2px solid red;
}

Вот JSBin, чтобы проиллюстрировать проблему:https://jsbin.com/jopaxoyesu/edit?html,css,js,output

Щелчок по документу добавляет строки.Если вы нажмете один раз, это нормально.Нажмите еще раз, и внезапно все ячейки в этом столбце будут иметь левую и правую границы.Это происходит только в Firefox.

Какой обходной путь есть для этого?

Я не могу использовать разделение границ.Использование 'схемы' удваивает границы и выглядит плохо.Я бы предпочел не вызывать рестайлинг, так как я беспокоюсь о производительности.Что еще я могу сделать?

Answer 1

Да, проблема заключается в смещении границ, но если вместо таблицы использовать cellspacing = "0" и небольшую хитрость в css (где вы удаляете левую границу, если рядом есть 2 или более .has-errors), этоработает также с Firefox!

$(document).on('click', function() {
  $('table').append('<tr><td>1</td><td>1</td><td>1</td></tr>')
});

.has-errors {
  border: 2px solid red;
}

.has-errors + .has-errors{
  border-left: none;
}

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
 <table cellspacing="0"> 
    <tr>  
      <td >1</td>
      <td class="has-errors">2</td>
      <td class="has-errors">3</td>
    </tr>
  </table>

Answer 2

Вы также можете использовать контур вместо границы, если хотите сохранить развал границы

$(document).on('click', function() {
  $('table').append('<tr><td>1</td><td>1</td><td>1</td></tr>')
});

table {
  border-collapse: collapse;
}

.has-errors {
   outline: 2px solid red;
   -moz-outline: 2px solid red;
   outline-offset:-1px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
 <table cellspacing="0"> 
    <tr>  
      <td >1</td>
      <td class="has-errors">2</td>
      <td class="has-errors">3</td>
    </tr>
  </table>

Answer 3

Я знаю, что вы упомянули о своем предпочтении не рестайлинга, однако единственное средство от этой проблемы, которое я нашел до сих пор, - это удаление коллапса границы.

table {
/* REMOVED border-collapse*/
}

.has-errors {
    outline: 2px solid red;
    -moz-outline: 2px solid red;
    outline-offset:-1px;
}