是否可以在没有图像或表格的CSS中创建网格状背景？

问题描述：

我想创建一个看起来像一个Excel电子表格的背景。白色表格单元格，每个单元格周围的薄边框。我知道如何用单个图像轻松完成此操作，并且我知道如何使用表格做到这一点......但是如果可能的话，我希望在没有这种情况下执行此操作。是否可以在没有图像或表格的CSS中创建网格状背景？

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

此背景的目的是让用户在网格上安排块。使用jQuery UI的拖放功能，我希望用户能够在受限制的网格中移动块。网格线将简单地显示它们的块所在的网格中的哪个位置。这个网格捕捉的例子（没有网格线）可以在http://jqueryui.com/demos/draggable/#snap-to

如果是严格的，你应该使用图像..如果这些细胞会拿着表格数据..你应该使用一个表的背景。 – Loktar

背景是什么意思？你打算把数据放在这些单元格内吗？对表格数据使用表格被认为是正确的。 –

您可以使用css渐变和多种背景来实现，但浏览器支持并不令人惊叹，图像真的是您最好的选择。 –

答

使用背景图像;不要浪费你的时间摆弄标记。你不会得到比这更高效的：

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

Example。

不错，至少用于调试。谢谢！ – FelipeAls

看起来很棒，但如何定义方形尺寸（带参数），甚至选择其他颜色？谢谢！ –

@RuiMarques：制作另一张图片。有[tools]（http://dopiaza.org/tools/datauri/）为您生成数据URI。 – josh3736

答

我已搜查也是因为这个问题，我发现了一个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选项。第一个梯度是水平的，第二个是垂直线。

这个演示中，我认识到CSS选项：

position: absolute

被要求。我现在将建立我的网格，如果我获得更多信息，我会在评论中添加它们。

希望这有助于:)

我搜索过这么久了。谢谢。 – Diskilla

致敬的男人！迷死人！ – Suresh

是否可以在没有图像或表格的CSS中创建网格状背景？

相关推荐