如何调整表格实现无间隙显示？附效果对比及代码链接

问题说明 #

• 需求：实现表格单元格紧密贴合的无间隙效果
• 当前异常：表格单元格间存在空白间隙，排查红色区块未发现margin或padding属性导致该问题

具体修复操作 #

• 合并表格边框
  为表格添加核心样式，强制合并边框与单元格间距：

  table {
    border-collapse: collapse;
    border-spacing: 0; /* 兼容部分旧浏览器 */
  }
  

• 清除行内块元素默认间距
  如果红色区块是inline-block类型，浏览器会解析HTML中的空白字符为间距，可通过两种方式解决：

  1. 父容器重置字号，子元素恢复：

     .table-row {
       font-size: 0;
     }
     .table-cell {
       font-size: 1rem; /* 根据需求调整字号 */
       display: inline-block;
     }
     

  2. 删除HTML代码中单元格元素之间的换行、空格等空白字符

• 重置单元格内边距
  检查并清除单元格的默认内边距：

  td, .table-cell {
    padding: 0;
  }
  

内容的提问来源于stack exchange，提问作者Севастиан Багинский