Inserting a blank table row with a smaller height

I have a table consisting of a header row and a couple of data rows. What I want to do is to create a blank row in between the header and the data rows, but I want this blank row to be smaller in height than the other rows (so that there isn't such a large gap).

How can I accomplish this?

My HTML mark-up code for the table is as follows:

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

Just add the CSS rule (and the slightly improved mark-up) posted below and you should get the result that you're after.

CSS

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

HTML

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

Since I have no idea what your current stylesheet looks like I added the !important property just in case. If possible, though, you should remove it as one rarely wants to rely on !important declarations in a stylesheet considering the big possibility that they will mess it up later on.

Try this:

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

You don't need an extra table row to create space inside a table. See this jsFiddle.
(I made the gap light grey in colour, so you can see it, but you can change that to transparent.)

Using a table row just for display purposes is table abuse!

I know this question already has an answer, but I found out an even simpler way of doing this.

Just add

<tr height = 20px></tr>

Into the table where you want to have an empty row. It works fine in my program and it's probably the quickest solution possible.

This one works for me:

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

I wanted to achieve the same as asked in this question but accepted answer did not work for me in May, 2018 (maybe answer is too old or some other reason). I am using bootsrap 3.3.7 and ionic v1. You need to set line-height to do set height of specific row.

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

I couldn't get anything to work until I tried this simple line:

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

which allows you to vary a filler line height to your hearts content (I was [probably MISusing Table to get three columns (boxes) of text which I then wanted to line up along the bottom)

I'm an amateur so would appreciate comments