是否可以在沒有圖像或表格的CSS中創建網格狀背景？

我想創建一個看起來像一個Excel電子表格的背景。白色表格單元格，每個單元格周圍的薄邊框。我知道如何用單個圖像輕鬆完成此操作，並且我知道如何使用表格做到這一點......但是如果可能的話，我希望在沒有這種情況下執行此操作。是否可以在沒有圖像或表格的CSS中創建網格狀背景？

每個單元格的大小將被固定爲20x20，所以我不必擔心調整大小。有什麼想法嗎？我有一種熟悉的方式，涉及大量的內部標記，但我認爲這幾乎和使用表格一樣糟糕。

此背景的目的是讓用戶在網格上安排塊。使用jQuery UI的拖放功能，我希望用戶能夠在受限制的網格中移動塊。網格線將簡單地顯示它們的塊所在的網格中的哪個位置。這個網格捕捉的例子（沒有網格線）可以在http://jqueryui.com/demos/draggable/#snap-to

來源

2011-08-31 rybosome

如果是嚴格的，你應該使用圖像..如果這些細胞會拿着表格數據..你應該使用一個表的背景。 – Loktar

背景是什麼意思？你打算把數據放在這些單元格內嗎？對錶格數據使用表格被認爲是正確的。 –

您可以使用css漸變和多種背景來實現，但瀏覽器支持並不令人驚歎，圖像真的是您最好的選擇。 –

使用背景圖像;不要浪費你的時間擺弄標記。你不會得到比這更高效的：

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

Example。

來源

2011-08-31 18:31:14 josh3736

不錯，至少用於調試。謝謝！ – 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

被要求。我現在將建立我的網格，如果我獲得更多信息，我會在評論中添加它們。

希望這有助於:)

來源

2013-07-21 23:19:43 prdatur

我搜索過這麼久了。謝謝。 – Diskilla

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

是否可以在沒有圖像或表格的CSS中創建網格狀背景？

回答

相關問題