Inserting a blank table row with a smaller height

Question

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

User · Answer

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.

_x000D_

.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">&nbsp;</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_

User · Answer

I know this question already has an answer  but I found out an even simpler way of doing this   Just add    lt tr height   20px gt  lt  tr gt    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

User · Answer

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

User · Answer

This one works for me    lt tr style  height  15px    gt

User · Answer

I couldn t get anything to work until I tried this simple line    lt p style  margin-top 0  margin-bottom 0  line-height  5  gt  lt br   gt  lt  p gt    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

User · Answer

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

User · Answer

Try this    lt td bgcolor   FFFFFF  style  line-height 10px   colspan 3 gt  amp nbsp  lt  td gt

[html] Inserting a blank table row with a smaller height

Examples related to html

Examples related to css

Examples related to html-table