Est-il possible de créer une grille de fond en CSS sans images ou des tableaux?

J'aimerais créer un fond qui ressemble à une feuille de calcul excel. Blanc des cellules de tableau, de fines bordures autour de chaque cellule. Je sais comment le faire facilement avec une seule image, et je sais comment le faire avec des tableaux...mais je voudrais le faire sans, si possible.

La taille de chaque cellule sera fixé à 20x20, donc je n'ai pas à vous soucier de redimensionnement. Toutes les pensées? J'ai eu une façon cuit qui a impliqué une tonne d'intérieur de balisage, mais j'ai pensé que c'était presque aussi mauvais que l'utilisation d'une table.

L'objectif de ce fond est de permettre aux utilisateurs d'organiser les blocs sur une grille. À l'aide de jQuery UI de la fonctionnalité de glisser-déposer, je veux que l'utilisateur soit en mesure de déplacer les blocs au sein d'un clos de la grille. Le quadrillage serait tout simplement de leur montrer où dans la grille les blocs sont liés. Un exemple de cette grille d'accrochage (sans quadrillage) est disponible à http://jqueryui.com/demos/draggable/#snap-to

Si c'est strictement pour un arrière-plan, vous devez utiliser une image.. si les cellules vont être tenue de tableaux de données.. il faut utiliser un tableau.
Quel est le point de l'arrière-plan? Allez-vous mettre les données à l'intérieur de ces cellules? Il est considéré comme correct d'utiliser des tables de données tabulaires.
Vous pouvez le faire avec un css gradient et des arrière-plans multiples, mais la prise en charge du navigateur n'est pas étonnant, une image est vraiment votre meilleur pari ici.

OriginalL'auteur rybosome | 2011-08-31

  1. 28

    J'ai cherché aussi pour ce problème et j'ai trouvé un très bonne solution:

    background-size: 40px 40px;    
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px);

    Pour modifier la taille de la grille, changer l'arrière-plan de la taille et de la dernière px option dans le dégradé.
    Pour modifier la largeur de la grille de changement de la première px option dans le dégradé.
    Premier gradient est horizontale, la seconde est pour les lignes verticales.

    pour cette démonstration, j'ai reconnu que le css:

    position: absolute

    était nécessaire. Je vais construire ma grille, et si j'obtiens plus d'informations, je vais les ajouter dans un commentaire.

    Espère que cela aide 🙂

    J'ai cherché pendant si long. Je vous remercie.
    salut man! awesomeness!

    OriginalL'auteur prdatur

  2. 13

    Utiliser une image d'arrière-plan; ne perdez pas votre temps à jongler avec le balisage. Vous n'allez pas être plus efficace que ce:

    background:url(data:image/gif;base64,R0lGODlhFAAUAIAAAMDAwP///yH5BAEAAAEALAAAAAAUABQAAAImhI+pwe3vAJxQ0hssnnq/7jVgmJGfGaGiyoyh68GbjNGXTeEcGxQAOw==);

    Exemple.

    Nice one, au moins pour le débogage. Merci!
    Qui semble impressionnant, mais comment définir le carré de la taille (avec un paramètre) ou même choisir une autre couleur? Merci!
    Faire une autre image. Il y a outils la production de données Uri pour vous.
    oui, mais je voudrais créer l'image dynamiquement, donc j'aurai besoin du code javascript pour le faire. J'ai déjà trouvé un chemin, mais il nécessite HTML5 canvas, j'ai voulu en quelque sorte éviter d'avoir besoin d'elle.
    Quelque chose comme cela, mais c'est plus complexe (puissant) que ce dont j'ai besoin ahahah: xarg.org/2010/03/...

    OriginalL'auteur josh3736