Reputation: 65

How to get rid of white lines inside a html table using CSS

I am trying to create a profile box where the user would be able to see his own profile picture, and other account specific information and utilities, like their username, settings button, profile page button, etc. The way I went about doing this was with a table element centered using flex. Then, I colored the backgrounds of my divs to see what they are doing. I noticed white lines between the cells of my table, tried some things, did some research, found the border-collapse attribute, and used it. Problem is, only some of my lines went away, as shown in the picture below. Weirder enough, it seems to disappear when I zoom in and out using ctrl + scroll. My guess is that it's some sort of rounding error.

What to do?

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

Edit: I tried putting cellpadding="0" and cellspacing="0" inside my and it didn't work. I also tried to explicitly state that margin = 0, padding = 0 in all table elements. I do not think that it's a margin/padding issue, as many have suggested below.

Edited code:

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

Second edit:

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

Upvotes: 2