Menu
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> 
675
Adjust the table size, column width, or row height manually or automatically. You can change the size of multiple columns or rows and modify the space between cells.
It looks like height of row depends on height of td. So we can put some div and set height to that div to fix height of row. td.table-column > div.item { height: 20px; overflow:hidden; background-color: lightpink; }
To set the size of a specific column, add the style attribute on a <th> or <td> element: To set the height of a specific row, add the style attribute on a table row element:
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! Show activity on this post.
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.
192
Try this:
<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3> </td> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
