Corrigé de la Première Colonne d'une Table de Bootstrap

J'ai suivi @koala_dev code de l' ce post pour essayer de verrouiller la première colonne de mon tableau défile horizontalement. Le code n'a malheureusement aucun effet sur ma table. Je me demandais si quelqu'un pouvait me donner quelques conseils sur ce que j'ai fait de mal, comme je suis nouveau en programmation.

C'est ma table:
http://jsfiddle.net/mademoiselletse/bypbqboe/59/

C'est le code que j'ai inséré dans le JS (ligne 121-133): 

$(function() {
    var $tableClass = $('.table');
    //Make a clone of our table
    var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column');

    //Remove everything except for first column
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    //Match the height of the rows to that of the original table's
    $fixedColumn.find('tr').each(function(i, elem) {
      $(this).height($tableClass.find('tr:eq(' + i + ')').height());
    });
});

C'est les propriétés CSS (ligne 36-47) j'ai inséré:

.table-responsive > .fixed-column {
   position: absolute;
   display: inline-block;
   width: auto;
   border-right: 1px solid #ddd;
}

@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

La seule chose que j'ai dévié de la le code de démonstration est que j'ai défini $('.table') comme $tableClass au lieu de $table depuis que j'ai défini précédemment var $table comme $('#table') . Votre aide sera très appréciée!

Dans la démo il y a cette ligne var $tableClass = $('.table'); c'est à dire que vous essayez d'obtenir votre objet table avec renvoi à la classe, mais vous avez donné votre table avec id comme table et pas className comme table
Merci pour le tuyau! J'ai référencé la table par l'ID de la place, mais j'ai obtenu ceci: jsfiddle.net/mademoiselletse/bypbqboe/62 Pourriez-vous me donner un indice sur le pourquoi c'est?
votre code est assez déroutant!! Pourquoi êtes-vous le clonage de l' table et pourquoi la suppression de toutes les table data et table head sauf le premier??
parce que je veux verrouiller la première colonne lorsque la table défile vers la droite, depuis que je suis tout à fait un grand nombre de colonnes, tout comme ce que cette personne a fait: jsfiddle.net/4XG7T/3
Oui je l'ai eu!! Mais vous pouvez le faire avec css droit?? pourquoi cloning et, de nouveau, de l'insertion et de tous pour qui??

OriginalL'auteur Vic | 2015-05-26

  1. 31

    Ok.. la suppression de tous vos js code et vous pouvez le faire avec un peu de CSS tricks comme ci-dessous:

    DÉMO

    CSS

    .table > thead:first-child > tr:first-child > th:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > tbody > tr > td:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > thead:first-child > tr:first-child > th:nth-child(2) {
    padding-left: 40px;
}

.table > tbody > tr > td:nth-child(2) {
    padding-left: 50px !important;
}
    C'est incroyable! Merci beaucoup!
    À tout moment!! Amusez-Vous Bien.. 🙂
    C'est une excellente pure CSS solution, qui bat la merde hors de ce désordre JS & CSS de l'autre référencés post.
    Désolé, mais je vois qu'il fonctionne encore.. Pourriez-vous s'il vous plaît laissez-moi savoir ce qui ne marche pas...?
    (impossible de formater, backticks sont des retours à la ligne), Seulement après que la partie a été assez bon pour moi (à l'aide de bootstrap-table plugin): ` /* making sure all rows are padded ahead of the fixed column*/ .table > thead > tr > th { padding-left: 40px !important; } ` /* fixing the column using absolute positioning */ .table > tbody > tr > td:first-child { position: absolute; width: 40px; } `

    OriginalL'auteur Guruprasad Rao

  2. 1

    $('#table') signifie que votre trouver l'élément par son id table.

    $('.table') signifie que votre trouver des éléments par classe table.

    Ce sont les sélecteurs CSS que vous avez utilisé dans le css.

    Dans votre cas, votre table id table de sorte que vous pouvez sélectionner le tableau à l'aide de $('#table').

    Et vous n'avez pas tous les éléments html à l'aide de la classe table, de sorte que vous n'obtenez rien lorsque vous sélectionnez à l'aide de $('.table').

    Merci de remarquer que je n'ai pas de la classe table. Je me rends compte que j'ai mis table à l'intérieur de data-class. J'ai suivi vos conseils et référencée dans la table par son ID, mais j'ai obtenu ceci: jsfiddle.net/mademoiselletse/bypbqboe/62 mes codes contradictoires?

    OriginalL'auteur Dilip Kumar

  3. 0

    Que j'ai testé @Administration Rao 's réponse , il a un bug si vous affichez th, td sont : "inline-block" au lieu de l'affichage par défaut :"table-cell"
    la largeur de la colonne 1 en-tête et la largeur de la colonne 1 en tbody ne sont pas de même largeur

    OriginalL'auteur Huỳnh Tú