Возможно ли создать сетчатый фон в CSS без изображений или таблиц?

Я хотел бы создать фон, который выглядит как таблица Excel. Белые клетки таблицы, тонкие границы вокруг каждой ячейки. Я знаю, как сделать это легко с одним изображением, и я знаю, как это сделать с таблицами... но я хотел бы сделать это, если это возможно.

Размер каждой ячейки будет зафиксирован на 20x20, поэтому мне не нужно беспокоиться о изменении размера. Есть предположения? У меня вроде как был приготовлен способ, который включал тонну внутренней разметки, но я полагал, что это было почти так же плохо, как использование таблицы.

Цель этого фона будет позволять пользователям размещать блоки в сетке. Используя функцию перетаскивания jQuery UI, я хочу, чтобы пользователь мог перемещать блоки внутри замкнутой сетки. Строки сетки просто отображали бы их, где в сетке привязаны их блоки. Пример этого привязки сетки (без линий сетки) доступен в http://jqueryui.com/demos/draggable/#snap-to

Ответы

Ответ 1

Я также искал эту проблему, и я нашел очень хорошее решение:

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);

Чтобы изменить размер сетки, измените параметр background-size и last px в градиенте. Чтобы изменить ширину сетки, измените первую опцию px в градиенте. Первый градиент горизонтальный, второй - для вертикальных линий.

для этой демонстрации я узнал, что опция css:

position: absolute

. Я создам свою сетку сейчас, и если я получу дополнительную информацию, я добавлю их в комментарий.

Надеюсь, что это поможет:)

Ответ 2

Использовать фоновое изображение; не тратьте свое время на разметку. Вы не будете более эффективны, чем это:

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

Пример.