Tabela szeroka – kolumny fixed

Jeśli tabela nie mieści się w oknie i chcemy zachować lewe kolumny (np. Nazwa wiersza) podczas przewijania w prawo:

Nazwa	Kolumna 2	Kolumna 3
Przykładowa nazwa produktu	Wartość 2	Wartość 3

 

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Nazwa</th>
        <th>Kolumna 2</th>
        <th>Kolumna 3</th>
        <!-- więcej kolumn -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Przykładowa nazwa produktu</td>
        <td>Wartość 2</td>
        <td>Wartość 3</td>
        <!-- więcej komórek -->
      </tr>
      <!-- więcej wierszy -->
    </tbody>
  </table>
</div>

<style> 
  .table-responsive table th:first-child, 
  .table-responsive table td:first-child { 
    position: sticky; 
    left: 0; 
    z-index: 1; 
    background-color: white; 
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2); 
  } 
</style>

Przykład dla przyklejenia dwóch kolumn:

<style>
/* Pierwsza kolumna sticky */
.table-responsive table th:nth-child(1),
.table-responsive table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
  box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2);
}

/* Druga kolumna sticky - wymaga innej wartości left */
.table-responsive table th:nth-child(2),
.table-responsive table td:nth-child(2) {
  position: sticky;
  /* Wartość left równa szerokości pierwszej kolumny */
  left: 200px; /* Dostosuj tę wartość do szerokości pierwszej kolumny */
  z-index: 1;
  background-color: white;
  box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2);
}
</style>

Przykład zaawansowany z automatycznym obliczaniem pozycji:

<style>
/* Styl dla obu sticky kolumn */
.table-responsive table th:nth-child(-n+2),
.table-responsive table td:nth-child(-n+2) {
position: sticky;
z-index: 1;
background-color: white;
}

/* Pierwsza kolumna */
.table-responsive table th:nth-child(1),
.table-responsive table td:nth-child(1) {
left: 0;
}

/* Druga kolumna - JavaScript obliczy pozycję */

/* Dodajemy cień tylko do drugiej kolumny */
.table-responsive table th:nth-child(2),
.table-responsive table td:nth-child(2) {
box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2);
}

/* Obsługa pasków w tabeli (jeśli używasz) */
.table-striped tbody tr:nth-of-type(odd) td:nth-child(-n+2) {
background-color: #f2f2f2;
}
</style>

<script>
// Skrypt do automatycznego obliczania pozycji drugiej kolumny
document.addEventListener('DOMContentLoaded', function() {
  const tables = document.querySelectorAll('.table-responsive table');

  tables.forEach(table => {
    const firstColWidth = table.querySelector('th:first-child').offsetWidth;

    // Ustawiamy left dla drugiej kolumny
    const secondColCells = table.querySelectorAll('th:nth-child(2), td:nth-child(2)');
    secondColCells.forEach(cell => {
      cell.style.left = firstColWidth + 'px';
    });

    // Aktualizacja po zmianie rozmiaru okna
    window.addEventListener('resize', function() {
    const updatedWidth = table.querySelector('th:first-child').offsetWidth;
      secondColCells.forEach(cell => {
        cell.style.left = updatedWidth + 'px';
      });
    });
  });
});
</script>