Displays html tables as hex matrix

hex.css

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=');
}