插入较小高度的空白表行

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

您不需要额外的表行来在表中创建空间.看到这个jsFiddle.
(我把间隙变成了浅灰色,所以你可以看到它,但是你可以把它变成透明的.)

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

Answer 3

试试这个:

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

Answer 4

这对我有用：

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

Answer 5

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

只需添加

<tr height = 20px></tr>

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