是否有可能在CSS中创建一个网格状的背景而没有图像或表格？ [英] Is it possible to create a grid-like background in CSS without images or tables?

问题描述

我想创建一个看起来像excel电子表格的背景。白色表格细胞，每个细胞周围的薄边框。我知道如何轻松地用一个单一的图像，我知道如何做到这一点与表...但我想这样做没有任何一个，如果可能的话。

I'd like to create a background that looks something like an excel spreadsheet. White table cells, thin borders around each cell. I know how to do this easily with a single image, and I know how to do this with tables...but I would like to do this without either, if possible.

每个单元格的大小将固定为20x20，所以我不必担心调整大小。有什么想法吗？我有一种方法，其中涉及一吨内部的标记，但我认为这几乎和使用表一样糟糕。

The size of each cell will be fixed at 20x20, so I don't have to worry about resizing. Any thoughts? I sort of had a way cooked up that involved a ton of inner markup, but I figured that was almost as bad as using a table.

这个背景的目的允许用户在网格上排列块。使用jQuery UI的拖放功能，我希望用户能够在一个有限的网格内移动块。网格线将简单地显示它们的块绑定到网格的哪里。此网格捕捉（没有网格线）的示例可在 http://jqueryui.com/demos/draggable/#我已经搜索了这个问题，我发现了一个

The purpose of this background will be allowing users to arrange blocks on a grid. Using jQuery UI's drag and drop functionality, I want the user to be able to move blocks around within a confined grid. The gridlines would simply show them where in the grid their blocks are bound to. An example of this grid snapping (without the gridlines) is available at http://jqueryui.com/demos/draggable/#snap-to

推荐答案

//jsfiddle.net/2kmUg/1/\">很好的解决方案：

I have searched also for this problem and i found a 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);

要更改网格大小，请更改渐变内的背景大小和最后一个px选项。
要更改网格宽度，请更改渐变内的第一个px选项。
第一个渐变是水平的，第二个是垂直线。

To change the grid size, change the background-size and the last px option within the gradient. To change the grid width change the first px option within the gradient. First gradient is horizontal, second is for the vertical lines.

这个演示我认识到css选项：

for this demo I recognized that the css option:

position: absolute

希望这有助于：）

这篇关于是否有可能在CSS中创建一个网格状的背景而没有图像或表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！