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

【问题标题】：How do I remove all spacing between table cells after the borders have been removed?删除边框后如何删除表格单元格之间的所有间距？
【发布时间】：2020-02-28 06:55:21
【问题描述】：

我正在尝试使用表格作为显示像素艺术的一种方式进行概念验证。我决定尝试以这种方式实现 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>

尽管我已经尝试过，但表格单元格的每一列之间仍然存在小间隙。我希望细胞能够无间隙地相互连接，谁能解释为什么会这样？

【问题讨论】：

    标签： html css html-table


    【解决方案1】：

    首先，并非所有浏览器都会出现这种情况；我可以在 Chrome (Windows) 上复制它，但不能在 Firefox 上复制它。

    通过将.pixel 的width 和height 设为分数测量值(width:1.2vw; height:1.2vw;)，您将迫使浏览器对这些标签的确切尺寸（以像素为单位）做出某种随意的决定。似乎 Chrome 向下取整，而 Firefox 向上取整（我在这里进行了简化），从而导致它们之间存在空间。

    一种解决方案是使用像素作为宽度和高度。另一种解决方案是将display: table-cell 添加到.pixel。

    【讨论】：

      猜你喜欢
      • 2012-01-18
      • 1970-01-01
      • 2012-04-14
      • 2019-01-31
      • 2012-11-24
      • 1970-01-01
      • 1970-01-01
      • 2017-07-09
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode