gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 08:05:29 25 4
gpt4 key购买 nike

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

.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>

screenshot of the perpetrator
screenshot at 125% zoom. Seems like the left and top white lines disappeared
编辑:我尝试将 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>

最佳答案

  .profile td {
padding: 0;
}
将此添加到您的 css 应该可以解决问题。或者您可以添加 cellpadding="0"在您的 html table标签。

关于html - 如何使用 CSS 去除 html 表格中的白线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66242490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com