Comment épingler la première colonne dans un tableau Responsive Bootstrap 3 ?

Épingler la première colonne dans un tableau Responsive Bootstrap 3

L'amélioration de la réactivité des tableaux est cruciale pour la conception de sites Web mobiles, en particulier lorsque l'écran est limité. l’immobilier oblige à prioriser des contenus spécifiques. Dans de tels scénarios, il peut être souhaitable de garantir que la première colonne d'un tableau reste fixe, offrant ainsi un accès facile aux informations essentielles.

Une solution efficace pour atteindre cet objectif consiste à exploiter JavaScript et CSS. En créant un clone de la première colonne et en appliquant un positionnement absolu, nous pouvons permettre au reste du tableau de défiler horizontalement tandis que la colonne clonée reste en place. Cette technique garantit que la colonne initiale, contenant souvent des informations cruciales telles que les en-têtes de tableau, reste visible quel que soit le défilement.

Implémentation de jQuery

Encapsulez le code JavaScript dans le $( bloc function(){...}), garantissant une exécution correcte lors du chargement du DOM. Créez un clone jQuery de la table existante, insérez-le avant la table d'origine et attribuez-lui la classe personnalisée « colonne fixe » pour la distinguer.

<code class="javascript">$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
});</code>

Ajustez la hauteur des lignes de la colonne clonée à correspondre à ceux de la table d'origine.

<code class="javascript">$fixedColumn.find('tr').each(function(i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});</code>

Style CSS

Définissez le style CSS pour positionner la colonne clonée de manière absolue, en définissant sa largeur et en appliquant une bordure et un arrière-plan appropriés couleur. Utilisez des requêtes multimédias pour masquer la colonne clonée pour les tailles de fenêtre supérieures à 768 px, garantissant ainsi un affichage optimal sur les grands écrans.

<code class="css">.table-responsive > .fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}  </code>

<code class="css">@media(min-width:768px) {
    .table-responsive > .fixed-column {
        display: none;
    }
}</code>

Application du monde réel

L'application La démo ci-dessous présente cette technique en action, corrigeant efficacement la première colonne même lors du défilement horizontal du reste du tableau sur les appareils mobiles.

Conclusion

La combinaison de jQuery et CSS permettent d'épingler la première colonne dans une table réactive Bootstrap 3, garantissant que le contenu crucial reste visible quelle que soit l'orientation de l'appareil. En clonant le premier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!