Расположение липких левых столбцов в таблице вызывает странные артефакты границ ячеек

Question

Поэтому я использую следующие CSS и JavaScript для создания закрепленных левых столбцов, которые остаются на экране, когда пользователь прокручивает отчет влево:

CSS:

     /* Custom sticky left styling */
     thead tr th:first-child, 
     thead tr th:nth-child(2),
     thead tr th:nth-child(3)
     {
       z-index: 2; /* top-left header element always visible */
       filter: brightness(95%);
     }

     tbody tr td:first-child,
     tbody tr td:nth-child(2),
     tbody tr td:nth-child(3)
     {
       position: sticky;
       top: 0;
       background-color: white; /* for elements where bg is unset */
       white-space: nowrap; /* prevents Description field from wrapping */
     }

JavaScript:

    // custom CSS left setting for 1-3 cols of header and body
    let set_sticky_left_values = () => {
      // get offset values (width w/ padding) to use as left values
      first_col_offset = document.querySelector('thead tr:first-child th:first-child').offsetWidth;
      second_col_offset = document.querySelector('thead tr:first-child th:nth-child(2)').offsetWidth;

      // margin_of_error used for when rounding causes px value to be slightly offset
      let margin_of_error = 1;

      // set header 
      document.querySelectorAll('thead tr th')
        .forEach(e => e.style.left = 0);
      document.querySelectorAll('thead tr th:nth-child(2)')
        .forEach(e => e.style.left = first_col_offset - margin_of_error);
      document.querySelectorAll('thead tr th:nth-child(3)')
        .forEach(e => e.style.left = (first_col_offset + second_col_offset) - (margin_of_error*2));
      
      // set body 
      let body_col_1 = document.querySelectorAll('tbody tr td:first-child');
      let body_col_2 = document.querySelectorAll('tbody tr td:nth-child(2)');
      let body_col_3 = document.querySelectorAll('tbody tr td:nth-child(3)');
      for (i = 0; i != body_col_1.length; i++) {
        body_col_1[i].style.left = 0;
        body_col_2[i].style.left = first_col_offset - margin_of_error;
        body_col_3[i].style.left = (first_col_offset + second_col_offset) - (margin_of_error*2);
      }
    }

HTML — это просто стандартная таблица данных, отформатированная следующим образом (фактический отчет содержит больше строк/ячеек):

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Однако после добавления этого кода у меня стали возникать странные артефакты границ (отсутствующие границы, неравномерная толщина и т. д.). Это кажется хуже при больших объемах данных (> 1000 строк). См. ниже:

Есть ли в этом коде что-то, что может вызывать такую ошибку? Все было хорошо, пока я не добавил этот код.

Расположение липких левых столбцов в таблице вызывает странные артефакты границ ячеек

Ответы (0)