CODEWITHSUNDEEP
htmlcsshtml-table
ray
ray

Reputation: 933

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

Upvotes: 0

Views: 1561

Answers (4)

Darek
Darek

Reputation: 570

This is not a "blank line". Look at this modified example of your table (I've just "showed" bottom td borders):

td {
  background-color: white;
  color: blue;
  text-align: center;
  padding: none;
  margin: none;
  /* Below is what I've  added !*/
  border-bottom: 1px dashed gray;
}
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;
}
<table>
  <tr>
    <td class="top name">name</td>
    <td class="top points">Billing 11</td>
    <td class="top totalPoints">49</td>
  </tr>
  <tr>
    <td>userLevel Rank rank</td>
    <td class="points">Meetings ....</td>
    <td>Points</td>
  </tr>
  <tr>
    <td class="bottom"></td>
    <td class="bottom points">Cross Selling ...</td>
    <td class="bottom"></td>
  </tr>
</table>

I think now it's clear why there's space between "Billing" and "Meetings..."... Font size in last column in first row (no of points - "49") makes whole row bigger. Remember that "Meeting.." phrase is in row below!

Upvotes: 0

gokulkaripath
gokulkaripath

Reputation: 11

It's because the other two td in the first tr occupy more space as the font size is larger.

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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)

Upvotes: 2

Felippe Duarte
Felippe Duarte

Reputation: 15131

The number 49 is way too big, and increasing the row height.

You can:

  • Replace table with div's
  • Create more rows and use colspan to achieve your expected output
  • Use vertical-align: bottom to put your content down, close to above rows.

Upvotes: 0

Related Questions