7
votes

Aligner comme une table mais avec CSS?

est-il possible d'aligner les 2 rangées suivantes comme une table? La première ligne est un H2 car c'est le titre et que les autres sont des listes. La première colonne doit être assez large, mais le reste peut être aussi large que le texte à l'intérieur. Les colonnes doivent remplir la largeur du div . xxx xxx

exemple:

 exemple


3 commentaires

Cela peut être fait avec l'affichage de CSS2: Tableau et des règles associées, qui est pris en charge par tous les navigateurs, à l'exception de IE jusqu'à IE8. Mais je suis intéressé par la raison actuelle de vouloir faire cela.


@Thatmatthew 1.) Beaucoup de personnes (malheureusement) utilisent encore IE7 et ces propriétés CSS2 ne sont pas prises en charge. W3Schools 2.) L'ancienne façon de faire des tables n'est pas recommandée par le W3C parce qu'il est difficile d'extraire des données. W3C


Je veux juste m'assurer que vous savez que Layout Les tables sont ce qui devrait être évité. Si vous avez une table de données, vous devez utiliser une table Tableau .


3 Réponses :


14
votes

Le HTML
.table-like {
  display: table;
  width: 500px;
}

.table-like div { 
  display: table-row;
}

.table-like div span { 
  display: table-cell;
}

/* add borders */
.table-like,
.table-like div span {
  border: 1px solid black;  
}

/* bold on 1st row */
.table-like div:nth-child(1) {
  font-weight: bold;
}


1 commentaires

OK, mais attention à ce que IE7 ne prend pas en charge cette méthode.



5
votes

Honnêtement, si vous essayez d'afficher des données tabulaires, utilisez une table. Il n'y a rien de mal aux tables, uniquement lorsque vous les utilisez pour positionner le contenu non tabulaire. Si vous avez besoin d'aide pour formater une table, modifiez votre question.


3 commentaires

Parfois, vous avez besoin d'un alignement de tableau, mais sans utiliser de tables en raison d'un balisage sémantique. Donc, je supprimerais cette réponse.


Je ne serais pas si rapide de sauter à cette conclusion. Il n'est pas rare que les gens avancent de grandes longueurs pour éviter d'utiliser un balisage sans table, sans aucune raison que de se vanter d'un site sans table.


@Marko c'est correct. Ce n'est qu'une petite section de page qui est au format de type tabulaire, donc je voudrais rester à l'écart des tables.



0
votes

Essayez d'utiliser l'affichage: Inline-Block:

h2{display: inline-block; margin:0 padding:0; min-width: 300px}/*use min-width what you want*/
ul, ul li{display: inline-block; margin:0; padding: 0;}


0 commentaires