Как удалить все промежутки между ячейками таблицы после удаления границ? - PullRequest
Новая
       16

Как удалить все промежутки между ячейками таблицы после удаления границ?

0 голосов
/ 02 ноября 2019

Я работаю над попыткой проверки концепции использования таблиц в качестве средства отображения пиксельной графики. Я решил попробовать реализовать матричный шрифт 5x7, но не могу устранить пробелы между некоторыми элементами.

Я уже пытался использовать css "border-collapse: collapse;" и атрибуты html cellpadding = "0", cellspacing = "0" и border = "0".

Код ниже можно посмотреть на 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>

Несмотря на то, что я пробовал, между каждым столбцом ячеек таблицы все еще остается небольшой разрыв. Я бы хотел, чтобы ячейки соединялись друг с другом без пропусков. Кто-нибудь может объяснить, почему это происходит?

1 Ответ

1 голос
/ 02 ноября 2019

Во-первых, это происходит не во всех браузерах;Я могу скопировать его в Chrome (Windows), но не в Firefox.

Делая width и height из .pixel дробного измерения (width:1.2vw; height:1.2vw;), вы заставляете браузер выполнятьнесколько произвольное решение о точных размерах (в пикселях) этих тегов. Похоже, что Chrome округляется, а Firefox округляется (я здесь упрощаю), что приводит к пробелу между ними.

Одним из решений является использование пикселей для ширины и высоты. Другое решение состоит в том, чтобы добавить display: table-cell к .pixel.

...