如何使用 CSS 去除 html 表格中的白线答案

【问题标题】：How to get rid of white lines inside a html table using CSS如何使用 CSS 去除 html 表格中的白线
【发布时间】：2021-02-17 23:01:36
【问题描述】：

我正在尝试创建一个个人资料框，用户可以在其中看到自己的个人资料图片以及其他帐户特定信息和实用程序，例如他们的用户名、设置按钮、个人资料页面按钮等。我的方式这样做是使用 flex 居中的表格元素。然后，我给我的 div 的背景上色，看看它们在做什么。我注意到表格单元格之间的白线，尝试了一些东西，做了一些研究，找到了border-collapse 属性，并使用了它。问题是，我的台词只有一些消失了，如下图所示。更奇怪的是，当我使用 ctrl + 滚动放大和缩小时，它似乎消失了。我猜这是某种舍入误差。

怎么办？

.Leftside2 {
  flex: 20%;
  background-color: red;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.profile {
  width: 90%;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  border-collapse: collapse;
}

#profile_picture {
  height: 100%;
  padding: 5px;
  background-color: orange;
  display: flex;
  justify-content: center;
}

#profile_picture img {
  width: 80%;
  height: 80%;
}

.friend_list {
  width: 90%;
}

<div class="Leftside2">
  <table class="profile">
    <tr>
      <td style="height: 30vh;border-width: 0px">
        <div id="profile_picture"><img src="https://via.placeholder.com/450x400"></div>
      </td>
    </tr>
    <tr>
      <td style="border: 0 solid black; background-color: orange">Jill</td>
    </tr>
    <tr>
      <td style="border-width: 0px">Eve</td>
    </tr>
    <tr>
      <td style="border-width: 0px">John</td>
    </tr>
  </table>
  <table class="friend_list">
    <tr>
      <td>Friends List</td>
    </tr>
    <tr>
      <td>content</td>
    </tr>
  </table>
</div>

编辑：我尝试将 cellpadding="0" 和 cellspacing="0" 放入我的内部，但没有成功。我还尝试明确声明所有表格元素中的边距 = 0，填充 = 0。正如许多人在下面所建议的那样，我认为这不是边距/填充问题。

修改后的代码：

.profile {
    width: 90%;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}

.profile td {
    padding: 0;
    margin: 0;
}

第二次编辑：

<html lang = "en">
<head>
    
        <link rel="stylesheet" href="../css/style.css">
        <title>Find a Friend</title>
    
</head>
<body>
    <div class="HeaderMenu">
        <div style="margin-left:40px;margin-right:100px;background-color: #008aed;">    
            <a href="logout.php" target="_self" class="logout_button_link"><button class="logout_button">Logout</button></a>
        </div>
    </div>
    <div class="row">
        <div class = "left_space"></div>
        <div class="Leftside2">
            <table class="profile" cellpadding="0" cellspacing="0">
                <tr>
                   <td style="height: 30vh;border-width: 0px">
                        <div id="profile_picture"><img src="../img/placeholder.png"></div>
                    </td>
                </tr>
                <tr>
                    <td style="border: 0 solid black; background-color: orange">Jill</td>
                </tr>
                <tr>
                    <td style="border-width: 0px">Eve</td>
                </tr>
                <tr>
                    <td style="border-width: 0px">John</td>
                </tr>
            </table>
            <table class="friend_list">
                <tr>
                    <td>Friends List</td>
                </tr>
                <tr>
                    <td>content</td>
                </tr>
            </table>
        </div>
        <div class="Centerside2">
            
        </div>
        <div class="Rightside2">
            
        </div>
        <div class = "right_space"></div>
    </div>
</body>

【问题讨论】：

请注意，这被视为滥用表格，使用屏幕阅读器的用户无法访问。
我应该改用什么？将 div 相互堆叠会更好吗？
Divs 将是更好的选择，并且在语义上更正确（您应该只将表格用于表格数据或电子邮件模板中）。此外，我真的不认为需要表格，因为无论如何每行只有一列，所以在这种情况下表格甚至对布局没有帮助
我会使用figure 元素作为图片，也许使用figcaption 元素作为名称。然后你可以使用ul 和lis 作为好友列表。基本上，从语义上考虑元素是什么，并使用最接近的匹配元素。
这能回答你的问题吗？ Extra white space on table cells

标签： html css html-table

【解决方案1】：

  .profile td {
      padding: 0;
  }

将其添加到您的 css 中应该可以解决问题。或者你可以在你的 html 中添加cellpadding="0" table 标签。

【讨论】：

像这样：？如果是，那么很遗憾它不起作用。

你能分享更多你的代码吗？您提供的 css 和 html 没有重现您在屏幕截图中显示的确切问题。

如果您不需要.profile 来拥有display:flex，您可以从您的CSS 中的.profile 中删除display:flex 和justify-content:center。这也解决了我机器上的问题。

请编辑您的答案，以便将来遇到相同问题的其他人更容易看到该解决方案。

【解决方案2】：

只需在 table 标签中添加属性 cellpadding="0" 即可解决您的问题。

【讨论】：

我试过了，可悲的是它并没有改变任何东西。
你应该试试 Nabil 分享的 CSS 技巧

【解决方案3】：

尝试将此添加到您的表格标签中：

cellspacing=“0”

填充是指单元格内的空间。单元格间距是关于它外面有多少空间。

【讨论】：