Question

我有一个由标题行和几个数据行组成的表。我想要做的是在标题和数据行之间创建一个空行，但我希望这个空白行的高度小于其他行（这样就没有这么大的间隙）。

我该如何做到这一点？

该表的HTML标记代码如下：

<table class="action_table">
    <tbody>
        <tr class="header_row">
            <td>Header Item</td>
            <td>Header Item 2</td>
            <td>Header Item 3</td>
        </tr>            
        <tr class="blank_row">
            <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td>
        </tr>
        <tr class="data_row">
            <td>Data Item</td>
            <td>Data Item 2</td>
            <td>Data Item 3</td>
        </tr>
    </tbody>
</table>

Answer 1

只需添加下面发布的CSS规则（以及略微改进的标记），您就应该得到您想要的结果。

<强> CSS

.blank_row
{
    height: 10px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}

<强> HTML

<tr class="blank_row">
    <td colspan="3"></td>
</tr>

由于我不知道您当前的样式表是什么样的，所以我添加了!important属性以防万一。但是，如果可能的话，你应该删除它，因为人们很少想在样式表中依赖!important声明，考虑到它们以后会搞乱它的可能性很大。

Answer 2

您不需要额外的表格行来在表格内创建空间。见this jsFiddle。
（我把间隙变成了浅灰色，所以你可以看到它，但你可以把它改成透明的。）

使用表格行仅用于显示目的是滥用表格！

Answer 3

试试这个：

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td>

Answer 4

我知道这个问题已经有了答案，但我发现了一种更简单的方法。

添加

<tr height = 20px></tr>

进入要有空行的表格。它在我的程序中工作正常，它可能是最快的解决方案。

Answer 5

这个适用于我：

<tr style="height: 15px;"/>

Answer 6

我希望达到与此问题相同的效果，但接受的答案在May, 2018中对我不起作用（也许答案太旧或其他原因）。我正在使用bootsrap 3.3.7和ionic v1。您需要将line-height设置为设置特定行的高度。

.blank_row {
  line-height: 3px;
}

<table class="action_table">
  <tbody>
    <tr class="header_row">
      <td>Header Item</td>
      <td>Header Item 2</td>
      <td>Header Item 3</td>
    </tr>
    <tr class="blank_row">
      <td bgcolor="#000" colspan="3">&nbsp;</td>
    </tr>
    <tr class="data_row">
      <td>Data Item</td>
      <td>Data Item 2</td>
      <td>Data Item 3</td>
    </tr>
  </tbody>
</table>

Answer 7

在我尝试这条简单的路线之前，我无法继续工作：

<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>

允许您根据心脏内容改变填充线高度（我[可能是MISusing Table获得三列（框）文本然后我想沿着底部排列）

我是业余爱好者，所以会很感激评论

插入较小高度的空白表行

7 个答案: