ray ray - 6 months ago 15
HTML Question

Blank line between <td> in html table

I have a blank line in between the

<td>
tag in my
<table>
and I don't know whats causing it.

I am using the blade template engine,
{{ }}
is part of its syntax. I have checked and there are no problems with the template engine.

Here is my html code:

<table>
<tr>
<td class="top name"> {{ $name }} </td>
<td class="top points"> {{ $activity1}} {{ $points1 }} </td>
<td class="top totalPoints"> {{ $points1 + $points2 + $points3}} </td>
</tr>
<tr>
<td> {{ $userLevel }} Rank #{{$rank + 1 }} </td>
<td class="points"> {{ $activity2 }} {{ $points2 }} </td>
<td> Points </td>
</tr>
<tr>
<td class="bottom"> </td>
<td class="bottom points"> {{ $activity3}} {{$points3 }} </td>
<td class="bottom"> </td>
</tr>




Here is the css code:

td {
background-color: white;
color: blue;
text-align: center;
padding: none;
margin: none;
}

table {
width: 80%;
border: 1px solid black;
border-collapse: collapse;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
}

.points {
border-right: 1px solid black;
font-size: 20px;
padding: none;
}

.top {
padding-top: 20px;
padding-bottom: none;
}

.name {
font-size: 30px;
}

.totalPoints {
font-size: 50px;
}

.bottom {
padding-bottom: 20px;
}


Here is what the current code generates. In this case I am trying to get rid of the blank line between billing and meetings cross selling.

screenshot

Answer

When you add a light background to .top you'll see that it is the vertical text alignment that causes the space. So add a vertical-align: bottom to .top and it's gone.

td {
  background-color: white;
  color: blue;
  text-align: center;
  padding: 0;
  margin: 0;
  }

table {
  width: 80%;
  border: 1px solid black;
  border-collapse: collapse;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;0
}

.points {
  border-right: 1px solid black;
  font-size: 20px;
  padding: 0;
}

.top {
  padding-top: 20px;
  padding-bottom: 0;
  vertical-align: bottom;
  background-color: #ccc;
 }

.name {
  font-size: 30px;
 }

.totalPoints {
  font-size: 50px;
 }

.bottom {
  padding-bottom: 20px; 
  }
<table>
  <tr>
    <td class="top name">User 3</td>
    <td class="top points">  Billing 11 </td>
    <td class="top totalPoints">  49  </td>
  </tr>
  <tr>
    <td> Senior rank #2 </td>
    <td class="points"> Meetings cross selling 24</td>
    <td> Points </td>
  </tr>
  <tr>
    <td class="bottom">  </td>
    <td class="bottom points"> Cross selling 14 </td>
    <td class="bottom">  </td>
  </tr>
</table>

Sidenote: it should be margin: 0 instead of margin: none (same with padding)