<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau HTML</title>
<style>
.table-container {
width: 100%;
overflow-x: auto;
}
table {
border-collapse: separate; /* Empêche la fusion des bordures */
border-spacing: 0;
width: 100%;
table-layout: auto; /* Permet aux colonnes de s'ajuster automatiquement */
}
th, td {
padding: 5px;
text-align: center;
border: 1px solid black; /* Bordure par défaut pour toutes les cellules */
box-sizing: border-box; /* Inclut la bordure dans la largeur de la cellule */
}
/* Fixer la largeur de la première colonne et lui donner une bordure visible */
.fixed-column {
position: sticky;
left: 0;
background: white;
z-index: 1;
border-left: 2px solid black; /* Bordure gauche visible */
border-right: 1px solid black; /* Bordure droite visible */
padding-left: 10px;
padding-right: 10px;
width: 222px; /* Largeur fixée à 222px pour la première colonne */
min-width: 222px; /* Empêche la réduction de la largeur */
}
/* Spécifier la bordure de la première colonne de chaque ligne */
td:first-child {
border-left: 2px solid black; /* Maintient la bordure gauche de la première cellule */
}
</style>
</head>
<body>
<div class="table-container">
<table>
<?php
$rows = ['toto', 'titi', 'lulu'];
$columns = 200;
foreach ($rows as $row) {
echo "<tr><td class='fixed-column' onclick='editCell(this)'>$row</td>";
for ($i = 0; $i < $columns; $i++) {
echo "<td>0</td>";
}
echo "</tr>";
}
?>
</table>
</div>
<script>
function editCell(cell) {
// Si la cellule est déjà en mode édition, ne rien faire
if (cell.querySelector("input")) return;
// Créer un champ input pour rendre la cellule éditable
var input = document.createElement("input");
input.type = "text";
input.value = cell.innerText; // Mettre la valeur actuelle de la cellule
cell.innerHTML = ''; // Vider la cellule
cell.appendChild(input);
// Donner le focus au champ input
input.focus();
// Enregistrer la valeur lorsque l'utilisateur appuie sur "Entrée"
input.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
cell.innerText = input.value; // Sauvegarder la valeur
}
});
// Fermer l'édition lorsque l'utilisateur clique en dehors de la cellule
input.addEventListener('blur', function() {
cell.innerText = input.value; // Sauvegarder la valeur
});
}
</script>
</body>
</html>