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>
This question is related to
html
css
html-table
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.
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 {_x000D_
line-height: 3px;_x000D_
}
_x000D_
<table class="action_table">_x000D_
<tbody>_x000D_
<tr class="header_row">_x000D_
<td>Header Item</td>_x000D_
<td>Header Item 2</td>_x000D_
<td>Header Item 3</td>_x000D_
</tr>_x000D_
<tr class="blank_row">_x000D_
<td bgcolor="#000" colspan="3"> </td>_x000D_
</tr>_x000D_
<tr class="data_row">_x000D_
<td>Data Item</td>_x000D_
<td>Data Item 2</td>_x000D_
<td>Data Item 3</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
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
Try this:
<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3> </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!
This one works for me:
<tr style="height: 15px;"/>
Source: Stackoverflow.com