Có thể tạo nền giống như lưới trong CSS mà không có hình ảnh hoặc bảng không?

Question

Tôi muốn tạo một nền trông giống như một bảng tính excel. Các ô bảng trắng, viền mỏng xung quanh mỗi ô. Tôi biết làm thế nào để làm điều này dễ dàng với một hình ảnh duy nhất, và tôi biết làm thế nào để làm điều này với các bảng ... nhưng tôi muốn làm điều này mà không có một trong hai, nếu có thể.

Kích thước của mỗi ô sẽ được cố định ở 20x20, vì vậy tôi không phải lo lắng về việc thay đổi kích thước. Có suy nghĩ gì không? Tôi đã có một cách nấu chín mà liên quan đến một tấn đánh dấu bên trong, nhưng tôi đã thấy rằng gần như là xấu như sử dụng một bảng.

Mục đích của nền này sẽ cho phép người dùng sắp xếp các khối trên lưới. Sử dụng chức năng kéo và thả của jQuery UI, tôi muốn người dùng có thể di chuyển các khối xung quanh trong một lưới giới hạn. Các đường lưới sẽ chỉ cho chúng thấy vị trí trong lưới của chúng. Ví dụ về tính năng chụp lưới này (không có đường lưới) có sẵn tại http://jqueryui.com/demos/draggable/#snap-to

Answer 1

Sử dụng hình nền; không lãng phí thời gian của bạn không quan trọng với đánh dấu. Bạn sẽ không nhận được bất kỳ hiệu quả hơn thế này:

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

Example.

Answer 2

Tôi đã tìm kiếm cũng cho vấn đề này và tôi tìm thấy một 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); 

Để thay đổi kích thước lưới, thay đổi background-kích thước và các tùy chọn px cuối cùng trong gradient. Để thay đổi chiều rộng lưới thay đổi tùy chọn px đầu tiên trong gradient. Độ dốc đầu tiên nằm ngang, thứ hai là cho các đường thẳng đứng.

cho bản demo này, tôi nhận ra rằng tùy chọn css:

position: absolute 

được yêu cầu. Tôi sẽ xây dựng lưới điện của tôi ngay bây giờ và nếu tôi có thêm thông tin, tôi sẽ thêm chúng vào trong một bình luận.

Hy vọng điều này sẽ giúp :)