È possibile creare uno sfondo a griglia in CSS senza immagini o tabelle?

Question

Mi piacerebbe creare uno sfondo che assomigli a un foglio di calcolo Excel. Celle da tavolo bianche, bordi sottili attorno a ciascuna cella. So come farlo facilmente con una singola immagine, e so come farlo con le tabelle ... ma mi piacerebbe farlo senza neanche, se possibile.

La dimensione di ogni cella verrà fissata a 20x20, quindi non mi devo preoccupare di ridimensionare. qualche idea? Avevo un modo di inventare che comportava una tonnellata di markup interiore, ma ho pensato che fosse quasi così male come usare un tavolo.

Lo scopo di questo sfondo consentirà agli utenti di disporre i blocchi su una griglia. Usando la funzionalità drag and drop di jQuery UI, voglio che l'utente sia in grado di spostare i blocchi all'interno di una griglia limitata. Le griglie mostrerebbero semplicemente dove sono collegati i loro blocchi nella griglia. Un esempio di questo snap alla griglia (senza la griglia) è disponibile a http://jqueryui.com/demos/draggable/#snap-to

Answer 1

Utilizzare un'immagine di sfondo; non sprecare il tuo tempo a giocherellare con il markup. Non avete intenzione di ottenere qualsiasi più efficiente di questo:

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

Example.

Answer 2

Ho cercato anche per questo problema e ho trovato un very good 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); 

Per modificare le dimensioni della griglia, cambiare lo sfondo-size e l'ultima opzione px all'interno del gradiente. Per modificare la larghezza della griglia, modificare la prima opzione di px all'interno del gradiente. Il primo gradiente è orizzontale, il secondo è per le linee verticali.

per questa demo ho riconosciuto che l'opzione css:

position: absolute 

è stato richiesto. Ora costruirò la mia griglia e se ottengo ulteriori informazioni li aggiungerò all'interno di un commento.

Spero che questo aiuti :)