Salut à tous,
J'ai sur mes pages des tableaux de données (divers réglages d'un produit électronique). De ce type :
Mon but était de pouvoir lire ces tableaux qui peuvent atteindre 10 ou 15 éléments en largeur, avec des contenus pouvant être relativement longs sur des écrans de petites tailles.
La fonction appelée :
Et suivi d'un appel de fonction en cas de chargement de page ou d'ajustement de largeur de page :
Afin de régler quelques problèmes de placement, voici le CSS asocié :
Je vous épargne les divers effets de style propre au site.
Ça fonctionne, je l'ai testé.
Bien sûr si vous avez des idées d'amélioration ou d'optimisation, je suis preneur.
Peut-être que ça vous servira, qui sait ?
À bientôt !
Modifié par Pacodellavega (12 Jul 2012 - 16:11)
J'ai sur mes pages des tableaux de données (divers réglages d'un produit électronique). De ce type :
<article>
<div class="tableDiv">
<table>
<tr><th>Entête 0</th></tr>
</table>
<table>
<tr><td>Data 1</td></tr>
</table>
<table>
<tr><td>Data 2</td></tr>
</table>
</div>
<div class="tableDiv">
<table>
<tr><th>Entête 0</th></tr>
</table>
<table>
<tr><td>Data 1</td></tr>
</table>
<table>
<tr><td>Data 2</td></tr>
</table>
<table>
<tr><td>Data 3</td></tr>
</table>
</div>
<article>Mon but était de pouvoir lire ces tableaux qui peuvent atteindre 10 ou 15 éléments en largeur, avec des contenus pouvant être relativement longs sur des écrans de petites tailles.
La fonction appelée :
// Gestion des tableaux en fonction de la largeur d'écran
var nbDivTable
var nbTables = new Array();
function idTables() // créations d'ID pour les div et les tables
{
var tableDiv = getElementsByClass('tableDiv');
nbDivTable = tableDiv.length
for(k = 0; k < nbDivTable; k++)
{
tableDiv[k].id = 'table' + k;
var tables = tableDiv[k].getElementsByTagName('table');
nbTables[k] = tables.length;
for(j = 0; j < nbTables[k]; j++) // pour chaque table
{
tables[j].id = 'table' + k + '_' + j;
}
}
}
function enteteTable()
{
for(k = 0; k < nbDivTable; k++)
{
var tabZero = document.getElementById('table' + k + '_0'); // recupération de la première table à répéter
var tabZeroLong = tabZero.rows[0].cells[0].clientWidth + 2; // sa longueur - Bizzarrement tabZero.clientWidth me renvoie une donnée erronée
var tabLimit;
var parentBlock = document.getElementById('table' + k);
var longArticle = document.getElementsByTagName('article')[0].clientWidth - 18; // largeur du conteneur moins un certain nombre de pixel dépendant des margins et paddings etc
var longTablx = 0; // variable pour mesurer les tables
var increment = 0; // une donnée incrémenté pour les ID de la table copiée
var tabZeroPrime; // copie de la première table
var n = 0; // donnée à incrémenter pour effacer les tables déjà affichée
var eraseNewTab = new Array();
var eraseNewBr = new Array();
var retChar = document.createElement("br"); // Ne fonctionne pas avec des '
// effacer toutes les occurences des tables entêtes copiées existantes
while(document.getElementById('table' + k + '_NT_' + n))
{
eraseNewTab[n] = document.getElementById('table' + k + '_NT_' + n);
eraseNewBr[n] = document.getElementById('retourChar' + k + '_' + n);
n++;
}
for(nn = 0; nn < n; nn++)
{
parentBlock.removeChild(eraseNewTab[nn]);
parentBlock.removeChild(eraseNewBr[nn]);
}
for(j = 0; j < nbTables[k]; j++) // pour chaque table
{
var tableId = document.getElementById('table' + k + '_' + j);
if(tableId.style.display == 'none')
{
}
else
{
tableId.style.display = 'inline-block';
longTablx += tableId.clientWidth;
if(j != 0) tabLimit = tabZeroLong + tableId.clientWidth;
else tabLimit = tabZeroLong;
if(tabLimit >= longArticle) // arrêt si la largeur du conteneur est insuffisante (sécurité)
{
break;
}
else if(longArticle <= longTablx)
{
var nexTab = tableId; // table "actuelle" devant laquelle sera placé la copie de la table entête
tabZeroPrime = tabZero.cloneNode(true); // copie de la première colonne
tabZeroPrime.id = 'table' + k + '_NT_' + increment; // changement de l'ID
tabZeroPrime.style.marginRight = '-1px'; // correction de placement
retourChariot = retChar.cloneNode(true); // copie
var valuId = 'retourChar' + k + '_' + increment; // création d'une ID pour le retour à la ligne
retourChariot.setAttribute('id', valuId);
parentBlock.insertBefore(tabZeroPrime, nexTab); // insertion de la copie de la table entête
longTablx = tabZeroLong; // réinitialisation de la longueur des tableaux : nouvelle ligne
j--; // recul d'un cran pour repartir de la bonne table
increment++;
parentBlock.insertBefore(retourChariot, tabZeroPrime); // insertion d'un retour chariot
}
}
}
}
}
Et suivi d'un appel de fonction en cas de chargement de page ou d'ajustement de largeur de page :
window.onload = function()
{
idTables();
enteteTable();
}
window.onresize = function()
{
enteteTable();
}Afin de régler quelques problèmes de placement, voici le CSS asocié :
table {
border-spacing: 1px;
border-collapse: collapse; /* Colle les bordures entre elles */
display: block;
margin-right: -4px;
padding: 0;
width: auto;
}
table[id^="table"] {
display: inline-block;
}
th {
font-weight: normal;
}
td, th {
border: 1px solid black;
text-align: right;
padding: 0 2px 0 2px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
height: 20px;
}
th ~ td {
border-left: 1px solid transparent;
}
Je vous épargne les divers effets de style propre au site.
Ça fonctionne, je l'ai testé.
Bien sûr si vous avez des idées d'amélioration ou d'optimisation, je suis preneur.
Peut-être que ça vous servira, qui sait ?
À bientôt !
Modifié par Pacodellavega (12 Jul 2012 - 16:11)