Comment puis-je figer la première et la dernière colonne d'une table html dans un div défilant?

J'ai une table qui contient un en-tête de la ligne, mais également un en-tête de colonne et une colonne "total", avec plusieurs colonnes entre les deux.

Quelque chose comme ceci:

Name    Score 1    Score 2  ...  Total
--------------------------------------
John       5          6            86
Will       3          7            82
Nick       7          1            74

L'ensemble de la table est définie à l'intérieur d'une largeur fixe à défilement div parce qu'il y a probablement un grand nombre de "Score" lignes et j'ai une largeur fixe de mise en page.

<div id="tableWrapper" style="overflow-x: auto; width: 500px;">
    <table id="scoreTable">
        ...
    </table>
</div>

Ce que je voudrais, c'est pour la première (Name) et la dernière (Total) les colonnes de rester visible à l'intérieur des colonnes de défilement.

Quelqu'un peut-il m'aider?

Edit: je veux dire le défilement horizontal uniquement - modifiées pour préciser que.

Mise à jour: j'ai résolu ce problème pour moi, et ont posté la réponse ci-dessous. Laissez-moi savoir si vous avez besoin de plus d'informations, - c'était un peu d'une douleur à faire et j'avais de la haine pour quelqu'un d'autre d'avoir à réécrire tout.

source d'informationauteur Damovisa

  1. 5

    Puis-je proposer un peu orthodoxe solution?

    Que penseriez-vous de placer le total de la colonne après la colonne 'nom', plutôt que tout à la fin? Ne serait-ce pas éviter l'obligation pour une partie seulement de la table pour faire défiler?

    Ce n'est pas exactement ce que vous demandez, mais c'est peut-être une solution suffisante, étant donné que l'alternative serait assez compliqué. (Placer les 'total' et 'nom' colonnes à l'extérieur de la table, par exemple, pourrait créer des problèmes d'alignement lorsque toutes les lignes sont de même hauteur. Vous pourriez corriger cela avec javascript mais alors vous seriez de pénétrer dans un nouveau monde de la douleur).

    Également à partir d'un point de vue de l'INTERFACE utilisateur, il se peut que " nom " et "total" sont les données les plus importantes, auquel cas il serait judicieux de les mettre ensemble, suivie par une sorte de "rupture" sur le montant total. Bien sûr, nous semblons avoir une intuition que "total" doit venir après ses éléments constitutifs, mais je ne pense pas que cela aurait pu causer trop de confusion pour l'utilisateur si la commande a été inversée comme ça (même si c'est une question pour vous, en fonction de votre produit et de vos utilisateurs).

    De toute façon, quelque chose à considérer.

    EDIT:

    Voici quelques solutions peu orthodoxes, maintenant que je pense comprendre vos intentions un peu mieux:

    1. Paginer les résultats. Donner le plus récent dix, dire, et le total, et
      un lien pour les anciens scores, qui sont prévus à 10 à l'heure
    2. Uniquement à donner des noms, des totaux et certaines autres mesures
      comme les moyennes et sd, puis fournir
      un lien pour chaque nom qui montre
      tous les résultats correspondant à cette
      nom. Vous pouvez également fournir
      un lien montrant tous les résultats pour une
      score donné, de sorte que les comparaisons entre les différents utilisateurs
      peut être fait. Le point est que vous feriez
      n'ont qu'à 1 dimension de
      les données pour chaque point de vue, plutôt que de
      ayant un lourd 2D jeu de données
    3. Rendre les lignes sortable (facile avec jQuery UI) de sorte que si je veux
      comparer Mary Jane, je peux faire glisser et de
      place l'un après l'autre, j'ai donc l'habitude de
      besoin de garder le défilement gauche et
      droit de voir les scores correspondent
      à qui les noms de
    4. Mettre en surbrillance une ligne lorsqu'il est cliqué, en changeant l'arrière-plan
      la couleur ou le même, encore une fois je n'ai pas besoin de garder le défilement de gauche et de droite.

    De toute façon, vous obtenez l'idée. Peut-être qu'il est préférable de regarder pour une INTERFACE utilisateur solution qu'un tordu de balisage de la solution. En fin de compte, je serais questionner sur la façon dont il est important de présenter autant de données à l'utilisateur à la fois, qu'une partie des il a besoin pour faire défiler dans un mode particulier pour que les données soient lisibles. Peut-être que vous êtes en train de construire une feuille de calcul de l'app, et vous avez vraiment besoin d'afficher une 100x100 matrice dans une vue unique. Si non, vous pourriez sûrement venir avec des moyens plus créatifs que j'ai pour répartir les résultats.

  2. 3

    Prendre un coup d'oeil à ce plugin jQuery:

    http://fixedheadertable.com/

  3. 2

    Il n'est pas complet en ce moment (je viens de moqués très rapide), mais voici un moyen de le faire en utilisant directement le code HTML. Vous voulez trois tables ... deux à l'extérieur de la <div>, et un à l'intérieur de la <div>. Tous les trois sont flottait à la gauche, de sorte qu'ils sont tous sur la même ligne.

    Le Test De La Table

    et le code lui-même:

      <table style="float: left;">
     <tr>
        <td>Name</td>
     </tr>
     <tr>
        <td>John</td>
     </tr>
     <tr>
        <td>Will</td>
     </tr>
  </table>
  <div id="tableWrapper" style="overflow-x: auto; width: 500px;float:left;padding-bottom: 10px;">
      <table>
        <tr>
           <td>Score1</td>
           <td>Score2</td>
           ...
        </tr>
        <tr>
           <td>5</td>
           <td>6</td>
           ...
        </tr>
        <tr>
           <td>3</td>
           <td>7</td>
           ...
        </tr>
        <tr>
           <td>7</td>
           <td>1</td>
           ...
        </tr>
      </table>
  </div>
  <table style="float: left;">
     <tr>
        <td>Total</td>
     </tr>
     <tr>
        <td>86</td>
     </tr>
     <tr>
        <td>82</td>
     </tr>
  </table>

    Remarque: Le padding-bottom sur la div est ainsi que la barre de défilement ne pas couvrir la table dans IE. Aussi, le bug que j'ai à faire est la façon de spécifier la largeur de l'en-tête des éléments à l'intérieur de la table du milieu. Pour une raison quelconque, en spécifiant la largeur="" attribut ne fonctionne pas. Ainsi, si le texte de l'élément d'en-tête est trop large (et se brise sur une autre ligne), puis la mise en page est cassé (off par une ligne)

  4. 2

    Je suppose que vous voulez le faire défiler horizontalement. Sinon, il pourrait être source de confusion avec des colonnes statiques.

    Vous pourriez mettre le overflow: auto sur un élément contenant de l'intérieur des cellules d'un tableau... je ne suis pas sûr de savoir comment les navigateurs serait en mesure de gérer cela, mais vous pourriez être en mesure de mettre les éléments que vous souhaitez à l'intérieur thead et tfoot éléments, et de mettre le défilement de la partie à l'intérieur d'un élément tbody, et l'ensemble de dépassement de capacité à l'auto.

    À défaut, vous devrez peut-être déposer la sémantique et le code de la colonne de gauche, colonne de droite en dehors de la table.

    Personnellement, j'essayerais de code comme sémantique que possible, et ensuite utiliser JavaScript pour positionner les colonnes droite et gauche. Sans JavaScript, vous devez le faire échouer gracieusement à seulement une grande table (pas sûr de savoir comment difficile ce serait, comme vous le dites vous ont une largeur fixe)

    Vous pouvez essayer ce (bruts) de jQuery exemple pour mettre la première colonne des valeurs à l'extérieur.

    var nameTable = '<table id="outside-name-col">
                  <thead>
                   <tr>
                    <th>Name</th>
                   </tr>
                  </thead>
                 <tbody>'; //start making a table for name column only

$('#scoreTable tbody tr').each(function() { //iterate through existing table

   var nameCol = $(this).find(':first'); //get column of index 0, i.e. first

   var cellHeight = nameCol.height(); //get the height of this cell

   $(this).find('td').height(cellHeight); //equalise the height across the row so removing this element will not collapse the height if it is taller than the scores and total       

   nameTable += '<tr><td style="height: ' + cellHeight + 'px">' + nameCol.html() + '</td></tr>'; //append the next row with new height and data

   nameCol.remove(); //remove this cell from the table now it's been placed outside

});

nameTable += '</tbody></table>'; //finish table string


$('#scoreTable').before(nameTable); //insert just before the score table

    Utiliser les CSS pour le positionnement d'aligner correctement. Ce n'est pas testé, mais ça devrait te donner une idée.

  5. 2

    J'ai expérimenté avec quelques méthodes (merci à tous ceux qui ont aidé) et voici ce que j'ai trouvé avec l'aide de jQuery. Il semble bien fonctionner dans tous les navigateurs que j'ai testé. N'hésitez pas à prendre et l'utiliser comme vous le souhaitez. Prochaine étape pour moi sera le transformant en une réutilisables plugin jQuery.

    Résumé:

    J'ai commencé avec un tableau normal avec tout ce qu'il contient (Id="ladderTable"), et j'ai écrit Trois méthodes - à bande de la première colonne, à bande de la dernière colonne, et un à fixer les hauteurs de ligne.

    La stripFirstColumn méthode crée une nouvelle table (Id="nameTable"), traverse la table d'origine et prend la première colonne, et ajoute de ces cellules à la nameTable.

    La stripLastColumn méthode n'est fondamentalement la même chose, sauf qu'il prend la dernière colonne et ajoute les cellules à une nouvelle table appelée totalTable.

    La fixHeights méthode examine chaque ligne de chaque tableau, calcule la hauteur maximale, et l'applique à des tables liées.

    Dans le document de prêt événement, j'ai appelé les trois méthodes dans l'ordre. Notez que tous les trois tables flotteur gauche donc ils vont simplement empiler horizontalement.

    La Structure HTML:

    <h1>Current Ladder</h1> 
<div id="nameTableSpan" style="float:left;width:100px;border-right:2px solid gray;"></div> 
<div id="ladderDiv" style="float:left;width:423px;overflow:auto;border:1px solid gray;margin-top:-1px;"> 
    <table id="ladderTable" class="ladderTable">
        <thead> 
            <tr><td>Name</td><td>Round 1</td> ... <td>Round 50</td><td class="scoreTotal">Total</td></tr>
        </thead>
        <tr><td>Bob</td><td>11</td> ... <td>75</td><td>421</td></tr>
           ... (more scores)
    </table>
</div>
<div id="totalTableSpan" style="float:left;width:70px;border-left:2px solid gray;"></div>

    Le jQuery:

    function stripFirstColumn() {                
//pull out first column:
var nt = $('<table id="nameTable" cellpadding="3" cellspacing="0" style="width:100px;"></table>');
$('#ladderTable tr').each(function(i)
{
nt.append('<tr><td style="color:'+$(this).children('td:first').css('color')+'">'+$(this).children('td:first').html()+'</td></tr>');
});
nt.appendTo('#nameTableSpan');
//remove original first column
$('#ladderTable tr').each(function(i)
{
$(this).children('td:first').remove();
});
$('#nameTable td:first').css('background-color','#8DB4B7');
}
function stripLastColumn() {                
//pull out last column:
var nt = $('<table id="totalTable" cellpadding="3" cellspacing="0" style="width:70px;"></table>');
$('#ladderTable tr').each(function(i)
{
nt.append('<tr><td style="color:'+$(this).children('td:last').css('color')+'">'+$(this).children('td:last').html()+'</td></tr>');
});
nt.appendTo('#totalTableSpan');
//remove original last column
$('#ladderTable tr').each(function(i)
{
$(this).children('td:last').remove();
});
$('#totalTable td:first').css('background-color','#8DB4B7');
}
function fixHeights() {
//change heights:
var curRow = 1;
$('#ladderTable tr').each(function(i){
//get heights
var c1 = $('#nameTable tr:nth-child('+curRow+')').height();    //column 1
var c2 = $(this).height();    //column 2
var c3 = $('#totalTable tr:nth-child('+curRow+')').height();    //column 3
var maxHeight = Math.max(c1, Math.max(c2, c3));
//$('#log').append('Row '+curRow+' c1=' + c1 +' c2=' + c2 +' c3=' + c3 +'  max height = '+maxHeight+'<br/>');
//set heights
//$('#nameTable tr:nth-child('+curRow+')').height(maxHeight);
$('#nameTable tr:nth-child('+curRow+') td:first').height(maxHeight);
//$('#log').append('NameTable: '+$('#nameTable tr:nth-child('+curRow+')').height()+'<br/>');
//$(this).height(maxHeight);
$(this).children('td:first').height(maxHeight);
//$('#log').append('MainTable: '+$(this).height()+'<br/>');
//$('#totalTable tr:nth-child('+curRow+')').height(maxHeight);
$('#totalTable tr:nth-child('+curRow+') td:first').height(maxHeight);
//$('#log').append('TotalTable: '+$('#totalTable tr:nth-child('+curRow+')').height()+'<br/>');
curRow++;
});
if ($.browser.msie)
$('#ladderDiv').height($('#ladderDiv').height()+18);
}
$(document).ready(function() {
stripFirstColumn();
stripLastColumn();
fixHeights();
$("#ladderDiv").attr('scrollLeft', $("#ladderDiv").attr('scrollWidth'));    //scroll to the last round
});

    Si vous avez des questions ou si il ya quelque chose qui n'était pas clair, je suis plus qu'heureux de vous aider.

    Il m'a fallu un certain temps pour qu'il n'y avait rien que je pouvais vraiment réutilisation et il a fallu un peu plus de temps pour écrire cela. J'avais de la haine pour quelqu'un d'aller à la même difficulté.

  6. 1

    U ne signifie défilement horizontal??

    Si vous voulez obtenir le défilement horizontal, alors vous pouvez utiliser 3 conteneurs.

    1. Pour la première colonne ( Nom )
    2. Pour les colonnes que vous souhaitez faire défiler. Définir la overflow-x style de ce conteneur auto
    3. De la dernière colonne ( Total )
  7. 0

    Le défilement du contenu des tableaux est une question problématique, puisqu'il n'est pas simple et navigateur une solution sûre pour y parvenir.

    Le meilleur et le plus sûr de le faire nécessite l'activation de JavaScript. Vous permettrait d'atteindre le même le Défilement horizontal facilement (il est inclus gratuitement) avec cette technique que j'ai utilisée. Vous pouvez transformer votre problème facilement:

    1) j'ai fait 3 Tables

    2) Placé au milieu de la Table qui contient les Données à l'intérieur d'un conteneur DIV

    3) définir la DIV style overflow:auto

    4) a donné l'en-tête et pied de page de la table et de la div chacun une largeur de 100%

    5) tout entouré par une autre div pour le contrôle de l'ensemble de la largeur de la table

    6) faites très attention à la quantité de colonnes correspondent à tous les trois tables, et que tous les trois ont les mêmes styles concernant les rembourrages, les marges et les frontières

    maintenant la partie intéressante:

    6) ci-dessous le dernier élément de la table de la construction, écrire un script javascript bloc (ou de l'inclure à partir d'un fichier)

    7) écrire une fonction qui, successivement, regarde chaque colonne (utiliser une boucle for), en commençant par la première. À chaque itération de la boucle, vérifier la td cellule de la première des deux tables dans la colonne en cours. Vérifiez qui est le plus grand et affectez-le à la petite td de la cellule de style. Vous pouvez appliquer cette valeur pour le pied de page de la table, trop.

    8) appel de la fonction. Vous pouvez le faire dans un intervalle ou lors d'événements spéciaux, tels que de nouvelles données dans les cellules (en cas d'utilisation d'ajax par exemple).

    Remarque: Si vous ne faites défiler horizontalement, vos colonnes tailles sont synchronisés. Mais vous devrez synchroniser la position de défilement de votre en-tête et pied de page de la table avec le contenu de la table. Sinon, il suffit de laisser l'ensemble de la div de faire défiler toute la chose horizontalement mais pas verticalement. Que serait la tâche de la DIV qui contient la table de données.

    Cette technique fonctionne très bien dans tous les principaux navigateurs dans un très coplex diagramme de gantt du projet.

    Remarque: Vous pouvez penser que le concept facilement dans une rotation de 90 degrés, de sorte qu'à vous de les corriger de la première et de la dernière colonne d'en-tête lors du défilement.

    Edit: Voici un autre exemple de mon code de base qui pourraient vous aider à obtenir la solution:

    var left_td = document.getElementById("left_td");
var right_td = document.getElementById("right_td");
var contentDiv = document.getElementById("contentDiv");
window.setInterval(function(){
var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2);
var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120;
left_td.style.width = left_td_width + "px";
right_td.style.width = right_td_width + "px";
}, 25);

    Ce code est le suivant: Il fait en sorte, qu'un Tableau avec 3 colonnes toujours ressemble à ça: la première et La dernière colonne ont la même taille, et le centre de la colonne a une largeur de 120 pixels.
    Assurez-vous que ne pas appliquer directement à votre problème particulier, mais Il peut vous donner un point de départ dans la dynamique de manipulation de la table à l'aide de JavaScript.