Question

我的<td>中的<table>标记之间有一个空行，我不知道是什么造成的。

我正在使用刀片模板引擎，{{ }}是其语法的一部分。我已经检查过，模板引擎没有问题。

这是我的HTML代码：

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

这是css代码：

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

这是当前代码生成的内容。在这种情况下，我试图摆脱计费和会议交叉销售之间的空白。

Answer 1

当您向.top添加浅色背景时，您会发现它是导致空间的垂直文本对齐方式。因此，vertical-align: bottom添加到.top并且它已经消失。

＆＃13;

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

＆＃13;

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

＆＃13;

旁注：它应该是margin: 0而不是margin: none（与填充相同）

Answer 2

这不是＆＃34;空白行＆＃34;。看一下这个表格的修改示例（我只是＆＃34;显示＆＃34;底部td边框）：

＆＃13;

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

＆＃13;

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

＆＃13;

我认为现在很清楚为什么＆＃34; Billing＆＃34;之间存在空间。和＃34;会议......＆＃34; ... 第一行最后一列的字体大小（没有点 - ＆＃34; 49＆＃34;）使整行更大。请记住＆＃34;会议......＆＃34;短语在下面排！

Answer 3

数字49太大了，增加了行高。

你可以：

将表替换为div＆＃39;
创建更多行并使用colspan来实现预期输出
使用vertical-align: bottom将您的内容放下，靠近行。

Answer 4

这是因为第一个tr中的另外两个td占用的空间越大，字体越大。

在html表之间的空白行

4 个答案: