Comment faire une table réactive - CSS
Cet article montrera comment nous pouvons faire un tableau réactif via CSS.
Comment faire / créer une table réactive?
La création d'un tableau réactif dans HTML nécessite l'utilisation du «débordement-x«Propriété dans le««Élément dans lequel le« Syntaxe Ici, la propriété «Overflow-X» ajoute la barre de défilement pour rendre la table réactive. Préalable: créez une table Table réactive Dans l'extrait de code HTML ci-dessus: Dans l'élément de style CSS, il est nécessaire de définir le «débordement-x»Propriété pour rendre la table réactive. Vous pouvez également ajouter d'autres propriétés pour rendre la table plus présentable: Dans l'élément de style CSS ci-dessus: Le code ci-dessus fera une table large dans la sortie et ce qui suit sera l'affichage: Si la taille de l'écran est minimisée de telle manière qu'elle déborde des bordures de l'écran, il y aura une barre de défilement horizontale affichée en bas en raison de l'utilisation de "débordement-x" propriété: Cela conclut comment faire des tables réactives en HTML. Conclusion Les tables réactives en HTML sont créées en ajoutant le CSS "débordement-x»Propriété pour l'élément div dans lequel la table est créée. Cette propriété crée simplement une barre de défilement horizontale directement à la fin de la table qui rend la table horizontalement à faire défiler. Ce message a démontré une méthode utile pour rendre une table simple réactive. " est créé.
La syntaxe pour ajouter le "débordement-x«La propriété pour rendre la table réactive est la suivante:
Créons une table qui est étendue horizontalement d'une manière qui déborde la largeur de l'écran en ajoutant plusieurs "" et " " éléments: Nom Standard Score Score Score Score Score Score Score Score Score Score Score Score Score Forgeron 8e 50 50 50 50 50 50 50 50 50 50 50 50 50 Jack 9e 70 70 70 70 70 70 70 70 70 70 70 70 70 John 10e 55 55 55 55 55 55 55 55 55 55 55 55 55
"L'élément est ajouté pour créer un tableau sur la page Web.
"Élément, quatre"
"Des éléments ont été ajoutés pour faire quatre rangées de la table. "Des éléments ont été ajoutés qui définissent le contenu de l'en-tête. "Des éléments ont été ajoutés pour insérer le contenu dans les lignes de table.
Overflow-X: Auto;
tableau
Espacement des bordures: 0;
Largeur: 100%;
Border: 1px solide #ddd;
th, td
Texte-aligne: gauche;
rembourrage: 8px;
TR: nième enfant (même)
Color d'arrière-plan: # f2f2f2;