如何减少表格中的边框间距？

Question

我有一个包含两行的表，其中左列中有一个h1标题。另外两列是带有强文本的普通段落。

第一行中的两个右列没有问题，但在第二行中，它们之间的垂直空间太大。很明显，它是h1，增加了它们之间的垂直空间。但是如果可能的话，我怎么能解决这个问题呢？我真的需要把h1放在桌子外面吗？

table {
   width: 80%; 
   margin-left: 2%; 
   border-collapse: separate; 
   border-spacing: 0 1px;
}

<table>
  <tr>
    <td><h1>Some big text</h1></td>
    <td><p><strong>Some</strong></p>
    <td><p><strong>smaller text</strong></p></td>
  </tr>
  <tr>
    <td></td>
    <td><p><strong>Here come</strong></p></td>
    <td><p><strong>Second row</strong></p></td>
</table>

Answer 1

该间距很可能来自h1和p标签的默认边距，重置它们并查看。

table {
  width: 80%; 
  margin-left: 2%; 
  border-collapse: separate; 
  border-spacing: 0 1px;
}
td {
  border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
  margin: 0; /*reset the margin*/
}

<table>
  <tr>
    <td><h1>Some big text</h1></td>
    <td><p><strong>Some</strong></p>
    <td><p><strong>smaller text</strong></p></td>
  </tr>
  <tr>
    <td></td>
    <td><p><strong>Here come</strong></p></td>
    <td><p><strong>Second row</strong></p></td>
  </tr>
</table>

编辑：我想出了（参见下面的评论）OP所指的边框间距。这是空<td>和border-collapse样式。要合并这两个<td>，您可以使用rowspan。要消除线条的小空间量，请使用border-collapse:collapse。

table {
  width: 80%;
  margin-left: 2%;
  border-collapse: collapse; /*set it to collapse*/
}
td {
  border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
  margin: 0;
}

<table>
  <tr>
    <td rowspan="2"><h1>Some big text</h1></td>
    <td><p><strong>Some</strong></p></td>
    <td><p><strong>smaller text</strong></p></td>
  </tr>
  <tr>
    <td><p><strong>Here come</strong></p></td>
    <td><p><strong>Second row</strong></p></td>
  </tr>
</table>

Answer 2

尝试从h1中删除边距。

h1 {
    margin: 0;
}

Answer 3

你可以做两件事。首先，通过缩小$httpBackend.when('GET', '/url').respond({}); 及其父h1来降低margin的高度。

此外，您可以使用包含padding的{​​{1}}中的rowspan属性，而不是第二行中的空td。

HTML：

h1

CSS：

td