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"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
Solution 1:
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.
Solution 2:
Try this:
<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3> </td>