<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tableau Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Permettre à la table de défiler horizontalement */
.table-responsive {
overflow-x: auto;
white-space: nowrap;
}
/* Bordure et espacement par défaut pour toutes les cellules */
th, td {
border: 1px solid #dee2e6;
padding: 8px;
background-clip: padding-box;
}
/* Fixer la première et la deuxième colonne */
th:nth-child(1), td:nth-child(1) {
position: sticky;
left: 0;
background-color: white;
z-index: 3;
border-right: 2px solid #dee2e6; /* Bordure droite spécifique */
}
th:nth-child(2), td:nth-child(2) {
position: sticky;
left: 100px; /* Ajuster pour la largeur de la colonne 1 */
background-color: white;
z-index: 2;
border-right: 2px solid #dee2e6; /* Bordure droite spécifique */
}
th:nth-child(3), td:nth-child(3) {
position: sticky;
left: 200px; /* Ajuster pour la largeur de la colonne 2 */
background-color: white;
z-index: 1;
}
/* Colonnes après la troisième (non sticky) */
th:nth-child(n+4), td:nth-child(n+4) {
position: relative;
z-index: 0;
}
/* Fixer l'en-tête en haut lors du défilement vertical */
thead {
position: sticky;
top: 0;
background-color: white;
z-index: 4;
}
</style>
</head>
<body>
<div class="container-fluid mt-4">
<div class="table-responsive">
<table class="table table-bordered table-striped w-100">
<thead>
<tr>
<th>Titre</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<script>
for (let i = 4; i <= 200; i++) {
document.write(`<th>col${i}</th>`);
}
</script>
</tr>
</thead>
<tbody>
<tr>
<td>Titre 1</td>
<td>Donnée 1</td>
<td>Donnée 2</td>
<td>Donnée 3</td>
<script>
for (let i = 4; i <= 200; i++) {
document.write(`<td>Donnée ${i}</td>`);
}
</script>
</tr>
<tr>
<td>Titre 2</td>
<td>Donnée A</td>
<td>Donnée B</td>
<td>Donnée C</td>
<script>
for (let i = 4; i <= 200; i++) {
document.write(`<td>Donnée ${String.fromCharCode(64 + (i % 26))}</td>`);
}
</script>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>