Maison > interface Web > tutoriel CSS > le corps du texte

Comment réparer la première colonne d'une table d'amorçage réactive ?

Susan Sarandon
Libérer: 2024-10-24 10:01:29
original
833 Les gens l'ont consulté

How to Fix the First Column in a Responsive Bootstrap Table?

Correction de la première colonne dans une table d'amorçage réactive

Les tables d'amorçage réactives sont un moyen pratique d'afficher des données sur des appareils mobiles. Cependant, s'assurer que la première colonne reste fixe (sans défilement) peut être un défi. Voici une solution efficace pour cela :

Méthode :

Pour corriger la première colonne, nous pouvons la cloner et la placer devant la table d'origine en utilisant la position du CSS : absolu. De cette façon, la colonne clonée restera à sa place pendant que le reste du tableau défile.

Étape 1 : Code jQuery

Utilisez jQuery pour cloner la table et créer la colonne fixe :

$(function() {
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
});
Copier après la connexion

Étape 2 : Style CSS

Définir les règles CSS pour la colonne fixe :

.table-responsive>.fixed-column {
    position: absolute;
}
Copier après la connexion

Pour ajuster la l'apparence et le comportement de la colonne fixe, vous pouvez ajouter des propriétés CSS supplémentaires telles que la largeur, la couleur d'arrière-plan et la bordure.

Considérations supplémentaires :

  • Ceci La solution fonctionne mieux pour les appareils mobiles sur lesquels un défilement horizontal est attendu.
  • Pour les appareils dotés d'écrans plus larges, vous souhaiterez peut-être masquer la colonne fixe pour éviter tout encombrement inutile.
  • Ajustez la valeur de largeur minimale dans la requête multimédia pour correspondre au point d'arrêt où la colonne fixe doit être masquée.

Démo :

[Lien vers une démo fonctionnelle ici]

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal