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

Question

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>

Note that this is considered an abuse of tables and is not accessible to users using screen readers. — Heretic Monkey, Feb 17 '21 at 13:13
What should I use instead? Is it better to just stack divs on top of one another? — Marius, Feb 17 '21 at 13:15
Divs would be the better option and more semantically correct (you should only use tables for tabular data or in email templates). Also I don't really see the need for tables as you just have one column per row anyway so tables don't even help with layout in this case — Pete, Feb 17 '21 at 13:18
I would use a `figure` element for the picture, maybe a `figcaption` element for the name. Then you could use a `ul` and `li`s for the list of friends. Basically, think about what the elements are, semantically, and use the closest element that matches. — Heretic Monkey, Feb 17 '21 at 13:23
Does this answer your question? [Extra white space on table cells](https://stackoverflow.com/questions/15969327/extra-white-space-on-table-cells) — Heretic Monkey, Feb 17 '21 at 13:24
I tried to set my margin and padding to 0 explicitly, like the answer said, however it didn't work for me — Marius, Feb 17 '21 at 13:39

score 2 · Accepted Answer · answered Feb 17 '21 at 13:23

2

  .profile td {
      padding: 0;
  }

adding this to your css should solve the problem. or you can add cellpadding="0" in your html table tag.

answered Feb 17 '21 at 13:23

Nabil

317
1
8

Like this: ? If yes, then it sadly doesn't work.
– Marius Feb 17 '21 at 13:28
can you share more of your code? the css and html you provided doesn't reproduce the exact problem you showed in your screenshots. – Nabil Feb 17 '21 at 13:58
1

if you don't need the `.profile` to have `display:flex` you can remove the `display:flex` and `justify-content:center` from `.profile` in your css. that also fixes the problem in my machine. – Nabil Feb 17 '21 at 14:11
Please edit your answer with so that the solution is more visible to others having the same problem in the future. – Marius Feb 17 '21 at 15:06

score 0 · Answer 2 · answered Feb 17 '21 at 13:28

0

just adding attribute cellpadding="0" in your table tag will fix your issue.

answered Feb 17 '21 at 13:28

Muhammad Taseen

519
7
22

I tried it and it didn't change anything sadly. – Marius Feb 17 '21 at 13:32
you should try the CSS trick that Nabil shared – Muhammad Taseen Feb 17 '21 at 13:35

score 0 · Answer 3 · answered Feb 17 '21 at 13:36

0

Try adding this to your table tag:

cellspacing=“0”

Padding refers to the space inside the cell. Cell spacing is about how much space there is outside it.

answered Feb 17 '21 at 13:36

G Wilson

11
3

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

3 Answers3