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 lt table class action table gt lt tbody gt lt tr class header row gt lt td gt Header Item lt td gt lt td gt Header Item 2 lt td gt lt td gt Header Item 3 lt td gt lt tr gt lt tr class blank row gt lt td bgcolor FFFFFF colspan 3 gt amp nbsp lt td gt lt tr gt lt tr class data row gt lt td gt Data Item lt td gt lt td gt Data Item 2 lt td gt lt td gt Data Item 3 lt td gt lt tr gt lt tbody gt lt table gt

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 lt tr class blank row gt lt td colspan 3 gt lt td gt lt tr gt 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

Inserting a blank table row with a smaller height

The Solution to Inserting a blank table row with a smaller height is

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.

~ Answered on 2012-03-16 14:22:06

Inserting a blank table row with a smaller height

The Solution to Inserting a blank table row with a smaller height is

Most Viewed Questions: