html - 插入一个高度较小的空白表格行

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 声明，考虑到他们以后很可能会把它搞砸。