HTML中做的表格为什么填充 间距 边框 三个都设置为0了，表格内部行与列之间还是有空隙。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML中做的表格为什么填充 间距 边框 三个都设置为0了，表格内部行与列之间还是有空隙。相关的知识，希望对你有一定的参考价值。

代码如下：
<div style="width:985px; margin:auto; padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/8888_01.gif" /></td>
<td><img src="images/8888_02.gif" /></td>
<td><img src="images/8888_03.gif" /></td>
</tr>

<tr cellpadding="0" cellspacing="0">
<td ><img src="images/8888_04.gif" /></td>
<td><img src="flash.gif" width="305" height="217" /></td>
<td><img src="images/8888_06.gif" /></td>
</tr>

<tr cellpadding="0" cellspacing="0">
<td><img src="images/8888_07.gif" /></td>
<td><img src="images/8888_08.gif" /></td>
<td><img src="images/8888_09.gif" /></td>
</tr>

</table>
效果图在这里，如图示还是有空隙啊！很急啊！！我的图片是一张大图有PS的切片工具给切的。大虾们放大我们图片就能看到，其实只有三个部分有空隙，右上角的图片竟然没有空隙！！！真心搞不懂了，在线等帮助，可行立马给分。谢谢大家·····额！！我真的不好意思说了事实证明了，是我用PS切片的时候自动切出来图片高度不一致导致的，而我又一直以为是代码的问题，感谢大家的热心帮忙，我虽然有财富，但是限定只能给一位大侠，所以分就给最热情的：xiaoxiaomao55同学，感谢大家对我这菜鸟的帮助！做惯了后台第一次做前台不是很习惯！真抱歉！嘿嘿····

是因为图片没有填充满格子，试试看类似这样：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div  style="width:985px; margin:auto; padding:0;">
<table   border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td ><img src="GotJobButton.png" /></td>
        <td ><img src="GotJobButton.png"  /></td>
         <td ><img src="GotJobButton.png"  /></td>
      </tr>
      <tr cellpadding="0" cellspacing="0">
         <td ><img src="GotJobButton.png"  /></td>
         <td ><img src="GotJobButton.png" /></td>
         <td ><img src="GotJobButton.png"  /></td>
      </tr>
      <tr cellpadding="0" cellspacing="0">
        <td ><img src="GotJobButton.png" /></td>
        <td ><img src="GotJobButton.png" /></td>
        <td ><img src="GotJobButton.png"  /></td>
      </tr>  
</table>
</div>
</body>
</html>

 参考技术A 建议CSS中将所有对象的内外距属性值设为0，
* margin:0; padding:0;

你加上这一段试试看效果。

看了你的代码，表格中插入的是图片，会不会图片宽度大于表格宽度造成段行呢？本回答被提问者采纳 参考技术B 如何清除图片下方出现几像素的空白间隙？
方法1：
img border:0;display:block;
方法2：img border:0;vertical-align:top; 参考技术C 布局不规范，你加上border=1先看看效果。
可能是td的宽度和高度没有自动适应。 参考技术D 在css文件里，试试：
table td margin:0; padding:0;
img margin:0; padding:0; border:0;

在表格单元格边框间距 CSS 中可以看到隐藏的行/列

【中文标题】在表格单元格边框间距 CSS 中可以看到隐藏的行/列【英文标题】：Hidden row/columns can be seen in table cell border-spacing CSS 【发布时间】：2022-01-13 00:05:45 【问题描述】：

我有一个固定 x 顶行数和 y 左列数的表格。

点赞：https://jsfiddle.net/26m75fge/11/

CSS：

div 
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
 


table 
  position: relative;
  border-collapse: collapse;


td,
th 
  padding: 0.25em;
  border: 0.25em solid white;


thead tr:nth-child(1) 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0.25em;
  background: #000;
  color: #FFF;
  z-index: 2;


thead tr:nth-child(2) 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 2em;
  background: #000;
  color: #FFF;
  z-index: 2;


thead th:first-child 
  left: 0;
  z-index: 1;


tbody th 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;

HTML：

  <table>
    <thead>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    ....
      </tr>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
 ....
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
       .....
      </tr>
    </tbody>
  </table>
</div>

但是，当我滚动其他单元格时，我可以在表格的背景/边框间距中看到“隐藏”行。 （参见：边框间距中的单元格）

有没有办法使用 CSS/JS 隐藏这些边框，以便这些单元格在滚动后不会显示？

cells in border spacing

【问题讨论】：

【参考方案1】：

设置边框样式：隐藏；用于表、tad、tbody、tr 然后将您的 th、td 填充和边框更改为所需的总长度，最后更改为 top: 0;对于粘性元素。见下文。

div 
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;


table 
  position: relative;
  border-collapse: collapse;
  

table, thead, tbody, tr 
  border-style: hidden;


td,
th 
  padding: 0.4em;
  border: 0.4em solid white;


thead 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
  z-index: 2;


thead th:first-child 
  left: 0;
  z-index: 1;


tbody th 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;

【讨论】：

【参考方案2】：

您可以将其添加到您的 css 中：

th 
  position: sticky;
  height: 50px;
  width: 100%;
  background: white;

根据需要调整这些值。此外，请参考以下其他来源： How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

https://css-tricks.com/position-sticky-and-table-headers/

【讨论】：

以上是关于HTML中做的表格为什么填充 间距 边框 三个都设置为0了，表格内部行与列之间还是有空隙。的主要内容，如果未能解决你的问题，请参考以下文章

Css中控制table单元格的间距

html表格单元格间距设不了是为啥

前端入门HTML基础元素3，表格

cellspacing与cellpadding

HTML 表格：仅在表格标题上有边框，边框折叠：在表格上分开

表格和列表样式