我正在尝试创建一个个人资料框，用户可以在其中看到自己的个人资料图片以及其他帐户特定信息和实用程序，例如他们的用户名、设置按钮、个人资料页面按钮等。我的方式这样做是使用 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"放入我的内部，但它不起作用。我还尝试在所有表元素中明确声明 margin = 0、padding = 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>
最佳答案
.profile td {
padding: 0;
}
将其添加到您的 css 中应该可以解决问题。或者您可以在 html table 标记中添加 cellpadding="0" 。
关于html - 如何使用 CSS 去除 html 表格内的白线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66242490/