Home » Html » Inserting a blank table row with a smaller height

Inserting a blank table row with a smaller height

Posted by: admin November 29, 2017 Leave a comment

Questions:

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

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.

Questions:
Answers:

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!

Questions:
Answers:

Try this:

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

Questions:
Answers:

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.

Questions:
Answers:

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