CODEWITHSUNDEEP
htmlcsshtml-table
Thomas Jones
Thomas Jones

Reputation: 1

How do I remove all spacing between table cells after the borders have been removed?

I am working on a proof of concept attempt at using tables as a means to display pixel art. I decided to try implementing 5x7 dot matrix font in this manner, but I can't seem to remove the gaps between some of the elements.

I've already tried using the css "border-collapse: collapse;", and the html attributes cellpadding="0", cellspacing="0", and border="0".

The code below can be viewed at https://jsfiddle.net/n2empc5g.

<!DOCTYPE html>
<html>
<head>
<style>
.blk {
  background-color:#eae1c8;
  }
.clr {
  background-color: transparent;
  }
.pixel {
  width:1.2vw; height:1.2vw;
  }
body {
  background-color:#c7af6b;
  }
.hellchar {
  border-collapse: collapse;
  padding: 0; margin: 0;
  display: inline-block;
  }
.rlogo-1 {
  width:max-content;
  padding: 2vh 5vw 2vh 5vw;
  border-style: solid;
  border-radius: 12px;
  background-color: #ff3a22;
  }
</style>
</head>
<body>
<center><div class="rlogo-1">
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
</table>
<table class="hellchar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel blk"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
<tr>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel blk"></div></td>
<td><div class="pixel clr"></div></td>
<td><div class="pixel clr"></div></td>
</tr>
</table>
</div>
</center>
</body>
</html>

Despite what I've tried, there is still a small gap between each column of table cells. I would like the cells to join with each other without gaps, could anyone explain why this is happening?

Upvotes: 0

Views: 44

Answers (1)

kmoser
kmoser

Reputation: 9308

First, this doesn't happen on all browsers; I can duplicate it on Chrome (Windows) but not Firefox.

By making the width and height of .pixel a fractional measurement (width:1.2vw; height:1.2vw;), you're forcing the browser to make a somewhat arbitrary decision about the exact dimensions (in pixels) of those tags. It seems Chrome rounds down, while Firefox rounds up (I'm simplifying here), resulting in space between them.

One solution is to use pixels for the width and height. Another solution is to add display: table-cell to .pixel.

Upvotes: 1

Related Questions