Skip to content

Instantly share code, notes, and snippets.

@fuddl
Created December 3, 2012 21:31
Show Gist options
  • Save fuddl/4198267 to your computer and use it in GitHub Desktop.
Save fuddl/4198267 to your computer and use it in GitHub Desktop.
Displays html tables as hex matrix
table {
display: block;
}
tr {
display:block;
margin-bottom: -20px;
border-collapse: collapse;
}
tr:nth-child(even) {
margin-left: 35px;
}
td {
display: inline-block;
padding: 0;
height: 80px;
width: 70px;
background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjcwIiBoZWlnaHQ9IjgwIj48cGF0aCBkPSJNIDEsMjAuNSAzNSwxIDY5LDIwLjUgNjksNTkuNSAzNSw3OSAxLDU5LjUgeiIgc3R5bGU9InN0cm9rZTpibGFjaztmaWxsOm5vbmUiIC8+PC9zdmc+Cg==');
}
td:hover {
opacity: .5;
background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjcwIiBoZWlnaHQ9IjgwIj48cGF0aCBkPSJNIDAsMjAgMzUsMCA3MCwyMCA3MCw2MCAzNSw4MCAwLDYwIHoiIHN0eWxlPSJmaWxsOiM4ZmQ2ZmY7IiAvPjwvc3ZnPgo=');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment