• Agence
  • Services
    • Stratégie numérique
      • Gestion de communauté
      • Stratégie des médias sociaux
      • Stratégie de contenu
      • Stratégie influenceurs
    • Conception web
      • Développement e-commerce
      • Création de site web
      • Design web (UI)
      • Développement web & programmation
      • Expérience utilisateur (UX)
      • Gestion de contenu CMS
    • Services Conseils
      • Accompagnement stratégique
      • Formation
      • Transformation numérique
      • Intégration CRM
    • Marketing web
      • Mesure de performance
      • Référencement naturel (SEO)
      • Référencement payant (SEM & PPC)
      • Solutions Web
      • Programmatique
  • Projets
  • Carrières
  • Industries
    • Secteurs d’activités
      • Détaillants
      • Manufacturiers et distributeurs
      • Services professionnels
      • Obnl
  • Nous joindre
  • Blogue
  • Accueil
  • Agence
  • Services
    • Stratégie numérique
      • Gestion de communauté
      • Stratégie des médias sociaux
      • Stratégie de contenu
      • Stratégie influenceurs
    • Conception web
      • Développement e-commerce
      • Création de site web
      • Design web (UI)
      • Développement web & programmation
      • Expérience utilisateur (UX)
      • Gestion de contenu CMS
    • Services Conseils
      • Accompagnement stratégique
      • Formation
      • Transformation numérique
      • Intégration CRM
    • Marketing web
      • Mesure de performance
      • Référencement naturel (SEO)
      • Référencement payant (SEM & PPC)
      • Solutions Web
      • Programmatique
  • Projets
  • Carrières
  • Industries
    • Secteurs d’activités
      • Détaillants
      • Manufacturiers et distributeurs
      • Services professionnels
      • Obnl
  • Nous joindre
  • Blogue
  • Accueil

Archives

Disposition fixe pour les tableaux (Fixed Table Layouts)

Même si les tableaux HTMLsont beaucoup moins utilisés dans les conceptions de sites web aujourd’hui, leur utilité peut être nécessaire dans plusieurs cas.

Voici une petite propriété simple à appliquer à votre CSS pour mieux contrôler la disposition des tableaux HTML  afin d’avoir une largeur qui s’adapte parfaitement

CSS
table {
table-layout: fixed;
}

Par défaut, la propriété CSS de « table-layout » est auto , par contre cela peut occasionner certains problèmes d’affichage.

Par défaut, dans un tableau, la dimension des cellules dépend de leur contenu. Si nous ne spécifions pas une largeur voulue, la largeur des cellules sera aléatoire selon le contenu à l’intérieur.

Exemple :

prog1

prog2

Si dans une cellule nous ajoutons une image qui dépasse la largeur qu’elle peut réellement occuper, l’image déborde tout simplement et même en ajoutant la propriété Css hoverflow: hidden; notre affichage restera dysfonctionnel. Il se passe le même problème avec la propriété Css white-space: nowrap; le contenu déborde également.

prog3 prog4

Maintenant, voyons comment remédier à la situation avec la propriété Css table-layout: fixed;
Premièrement il faut donner les propriétés requissent à notre tableau:

table {
table-layout: fixed;
width: 100%; /* doit être spécifié*/
}

L’avantage est que nous pouvons donner des largeurs sans avoir peur qu’elles ne débordent.

prog5

Et par le fait même il est possible de donner les propriétés Css overflow: hidden; afin que le contenu qui dépasse se cache, white-space: nowrap; pour que le contenu demeure sur un seul ligne et text-overflow: ellipsis; qui coupe le texte qui dépasse.

prog6

La même chose pour les images qui sont trop large;  maintenant que la propriété overflow: hidden; fonctionne, l’affichage ne se brise pas.

prog7

Il y aussi la propriété Css overflow: auto; qui permet de voir le contenu qui déborde avec une « scroll bar ». Notez que cette propriété ne fonctionne pas dans le navigateur Firefox.

prog8

Je ne sais pas si, avec cette option, vous appréciez plus l’utilisation des tableaux HTML,mais ces propriétés simples peuvent être très pratiques!

source http://css-tricks.com/fixing-tables-long-strings/

Par Webit Interactive - le 06 février 2015
Partager

Contactez-nous

En voilà d'autres

Archives
Mobilgeddon ou le nouvel algorithme mobile de Google
Lire la suite
Archives
Tendances à surveiller sur les médias sociaux
Lire la suite
Archives
Nouvelles unités de mesure
Lire la suite
Archives
Mobilgeddon ou le nouvel algorithme mobile de Google
Lire la suite
Archives
Tendances à surveiller sur les médias sociaux
Lire la suite
Archives
Nouvelles unités de mesure
Lire la suite

Suivez-nous

170 Boul. Taschereau, Bureau 245, La Prairie,
(Québec) J5R 5H6

Itinéraire
+1 (514) 932-4840

Tenez-vous à jour

Avis légal

© Webit Interactive 2021