Fatal编程技术网
  • html/
  • Html 删除边框后，如何删除表格单元格之间的所有间距？

Html 删除边框后，如何删除表格单元格之间的所有间距？

html css

Html 删除边框后，如何删除表格单元格之间的所有间距？,html,css,html-table,Html,Css,Html Table,我正在进行概念验证，尝试使用表格作为显示像素艺术的手段。我决定尝试以这种方式实现5x7点阵字体，但似乎无法消除某些元素之间的差距 我已经尝试过使用css“border collapse:collapse；”，以及html属性cellpadding=“0”、cellspacting=“0”和border=“0” 以下代码可在上查看 布莱克先生{ 背景色：#eae1c8； } .clr{ 背景色：透明； } .像素{ 宽度：1.2vw；高度：1.2vw； } 身体{ 背景色：#c7af6b； }

我正在进行概念验证，尝试使用表格作为显示像素艺术的手段。我决定尝试以这种方式实现5x7点阵字体，但似乎无法消除某些元素之间的差距

我已经尝试过使用css“border collapse:collapse；”，以及html属性cellpadding=“0”、cellspacting=“0”和border=“0”

以下代码可在上查看


布莱克先生{
背景色：#eae1c8；
}
.clr{
背景色：透明；
}
.像素{
宽度：1.2vw；高度：1.2vw；
}
身体{
背景色：#c7af6b；
}
hellchar先生{
边界塌陷：塌陷；
填充：0；边距：0；
显示：内联块；
}
.rlogo-1{
宽度：最大含量；
填充：2vh 5vw 2vh 5vw；
边框样式：实心；
边界半径：12px；
背景色：#ff3a22；
}
尽管我已经尝试过了，但表单元格的每一列之间仍然有一个小间隙。我希望这些单元格能够无缝连接，有人能解释为什么会发生这种情况吗？

首先，并非所有浏览器都会发生这种情况；我可以在Chrome（Windows）上复制，但不能在Firefox上复制

通过将
.pixel
的
宽度
和
高度
作为分数测量（
宽度：1.2vw；高度：1.2vw；
），您迫使浏览器对这些标记的精确尺寸（以像素为单位）做出某种程度的任意决定。Chrome似乎在向下取整，而Firefox则在向上取整（我在这里简化），从而在它们之间留出了空间

一种解决方案是使用像素表示宽度和高度。另一个解决方案是将
显示：表格单元格
添加到
.pixel

<!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>